vue-cli 中多个组件共用一个mt-checklist
// html
<div v-if="dataList"> <mt-popup v-model="popupVisible" position="bottom" class="mint-popup" style="width: 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 ; } }
作者:人参,每篇随笔皆原创(除非注明原作者的随笔),欢迎指正!