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 ;
                  }
    }
  • 相关阅读:
    centos7安装KVM
    keepalived高可用
    Jenkins-Pipeline 流水线发布部署项目
    centos7部署jenkins
    版本控制gitlab
    c语言寻找3000以内亲密数对
    c语言寻找1000以内的完全数
    c语言分解因式
    c语言判断给定日期是当年的第几天
    c语言计算程序运行时间
  • 原文地址:https://www.cnblogs.com/panax/p/10933175.html
Copyright © 2011-2022 走看看