zoukankan      html  css  js  c++  java
  • vue-cli 中多个组件共用一个mt-checklist

    // html

    <div v-if="dataList"> <mt-popup v-model="popupVisible" position="bottom" class="mint-popup" style=" 100%;height: 30%;"> <mt-picker :slots="dataList" @change="onDateChange" :visible-item-count="5" :show-toolbar="false" ref="picker" value-key="name"></mt-picker> </mt-popup> </div>

      

    data(){
      popupVisible:false, // 默认隐藏
      a:0,           // 设置一个标识
    }
    
    value-key="name" 必须与option[{name:''}] 一致
     computed: {
              dataList () {
                if(this.a === 0 || this.a === 1 || this.a === 4 || this.a === 5 || this.a === 6 || this.a === 7 || this.a === 8 || this.a === 9 || this.a === 10 || this.a === 11 || this.a === 12 || this.a === 13  || this.a === 16){
                  this.dateSlots = [
                    {
                      flex: 1,
                      values: this.tagList,
                      className: 'slot1',
                      textAlign: 'center'
                    }
                  ];
                }else if(this.a===3){
                  this.dateSlots = [
                    {
                      flex: 1,
                      values: [1,2,3,4,5,6,7,8,9],
                      className: 'slot2',
                      textAlign: 'right'
                    }, {
                      flex: 1,
                      values: [0,1,2,3,4,5,6,7,8,9],
                      className: 'slot4',
                      textAlign: 'center'
                    }, {
                      flex: 1,
                      values: [0,1,2,3,4,5,6,7,8,9],
                      className: 'slot4',
                      textAlign: 'left'
                    }
                  ]
                }
                return  this.dateSlots ;
              },
    },
    // 多列与单列并存  ,点击事件去控制a
    showPopupVisible(index){
                this.popupVisible = true ;
                this.openTouch();
                if(index === 0){
                  this.a = 0
                  this.tagList = this.createData.publishType.attrValues;
                }else if(index === 1){
                  this.a = 1 ;
                  this.tagList = this.createData.rentalType.attrValues;
                }
    }
    // 拿到name和对应的id 传给后端
    onDateChange (picker, values) {
                console.log(picker)
                console.log(values)
                if(values[0]){
                  if(this.a === 0){
                    this.value0 = values[0].name;
                    this.valueId0 = values[0].id ;
                  }else if(this.a === 1){
                    this.value1 = values[0].name;
                    this.valueId1 = values[0].id ;
                  }
    }
  • 相关阅读:
    CF566E Restoring Map
    CF1034D Intervals of Intervals
    CF1285F Classical?
    Java日报
    课程考核感想
    每日日报8月31日
    每日日报8月30日
    每日日报8月29日
    每日日报8月28日
    每日日报8月27日
  • 原文地址:https://www.cnblogs.com/panax/p/10933175.html
Copyright © 2011-2022 走看看