码迷,mamicode.com
首页 > 其他好文 > 详细

下拉框

时间:2020-05-22 00:07:34      阅读:49      评论:0      收藏:0      [点我收藏+]

标签:下拉框   rip   color   play   group   gray   prim   ret   column   

<template>
  <div class="about">
    <h1>about page</h1>
    <el-row>
  <el-col :span="2"><div class="grid-content bg-purple">11</div></el-col>
  <el-col :span="22"><div class="grid-content bg-purple-light">22</div></el-col>
</el-row>
<el-row>
  <el-col :span="2"><div class="grid-content bg-purple"></div>11</el-col>
  <el-col :span="22"><div class="grid-content bg-purple-light">22</div></el-col>
</el-row>
<el-row>
  <el-col :span="2"><div class="grid-content bg-purple"></div>111</el-col>
  <el-col :span="22">
    <el-row>
  <el-col :span="24"><div class="more">
    <div v-show="istrue">
      <ul class="zij">
        <li v-for="(item,index) in zimu" :key="index"
         @click="changeck(item)"
         :class="back==item?‘back‘:‘‘"
         >{{item}}</li>
      </ul>
    </div>
    <div class="dis">
       <div :class="selecttab== ‘all‘?‘change‘:‘unSelected‘">
       
    <el-checkbox-group v-model="checkboxGroup3" size="small" v-if="isshow">
      <el-checkbox-button v-for="city in cities" :label="city"  :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
     <el-checkbox-group v-model="checkboxGroup3" size="small" v-else>
      <el-checkbox-button v-for="city in newlist" :label="city"  :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </div>
    <van-button type="primary" size="mini" @click="moreclock">{{news}}</van-button>

    </div>
    
  </div></el-col>
</el-row>
    <el-row>
  <el-col :span="24"><div >已选:{{checkboxGroup3}}</div></el-col>
</el-row>

  </el-col>
</el-row>
   
    

  </div>
</template>
  <script>
  const cityOptions = [上海, 北京, 广州, 深圳,上海, 北京, 广州, 深圳];
export default {
  data(){
    return{
      back:‘‘,
      istr:‘‘,
      selecttab:all,
       checkboxGroup3: [上海],
       checkboxGroup4:[A],
        cities: cityOptions,
        cit:[方法,广告,方法,试试,嘿嘿,
        啊啊,额额,规范,一键,设置,让他,虽然,,
        制作,规范,个人,方法,广告,方法,试试,嘿嘿,],
        newlist:[],
        zimu:[A,B,C,D,E,F,G,H,I,J,
        K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z],

        isshow:true,
        istrue:false,
        news:查看更多

}
  },methods:{
    moreclock(){
      this.isshow=!this.isshow
      this.istrue=!this.istrue
      
      this.selecttab = !this.selecttab
      if (this.isshow) {
        this.news = 查看更多
      }else{
         this.news = 收起
      }
     this.newlist= this.cities.concat(this.cit)
      console.log(this.newlist)
    },
    changeck(i){
         console.log(i)
         this.back = i
         this.istr = true
    }

  },

   mounted(){
     console.log(this.$route.params.id)
   }
}

</script>
<style lang="scss" scoped>
.el-row{
   border: 0.3px solid gray;
   
   & :nth-child(3){
     
   }

}
.more{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .change{
    min-height: 40px;
    max-height: 120px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    // overflow: scroll;
    // overflow-x:hidden;
  }
  .unSelected{
     max-height: 120px;
    overflow: scroll;
     overflow-x:hidden;
    
  }
.zij{
  display: flex; 
  max-width: 80%;
  li{
    padding-left: 10px;
    cursor: pointer;
  }

}
.dis{
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
  
}
.back{
  color: aqua;
}


</style>

 

下拉框

标签:下拉框   rip   color   play   group   gray   prim   ret   column   

原文地址:https://www.cnblogs.com/hwj369/p/12934269.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!