实现此效果 ,是两个插件的组合使用:
import Vue from 'vue';
import { Popup } from 'vant';
import { Picker } from 'vant'; Vue.use(Picker);
Vue.use(Popup);
搭配弹出层使用 Popup & picker
<!--
popShow data 里面默认未false ,控制van-popup的弹出
title :picker 中间的title
data 里面设置 surePickItem :{} 如果是添加则就是{} ;如果是修改则是
surePickItem:{
keyId :"",
text :"",
},
-->
<van-popup class="popWrap beParant" round position="bottom" :style="{ height: '60%' }" v-model="popShow" >
<van-picker
title="选择步骤"
value-key="text"
:value="surePickItem"
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="popShow = false"
@change="onChange"
/>
</van-popup>
<!--遮道层-->
//对应的方法
onConfirm(value, index) {
this.surePickItem = value; /*value 为 选择数组 columns 的其中一个对象 {"keyId":1,"text":"机光安装"}*/
if (value.keyId == 1){
Toast(`${value.text }`);
}
this.popShow = false ;
},
onChange(picker, value, index) {
Toast(`当前选择 : ${value.text }`);
},
getEquipmentMouldIndex(){
api.getEquipmentMouldIndex({
orderId:this.orderId,
})
.then((res) => {
if (res.code == 200) {
this.chooseItems = res.data.mouldItems ; /*从接口中获取的数组,需要封装成 picker 里面可以显示的数组*/
/*文档中columns 是columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'], 但是实际中需要封装的里面是对象;这里
* columns 的里面对象的key 是固定的 text & keyId 其中至少有一个是text 否则将不会显示出来;
* */
for (var i = 0;i< this.chooseItems.length ;i++){
var obj = {};
obj.text = this.chooseItems[i].itemIndex + " " + this.chooseItems[i].mouldItem ;
obj.keyId = this.chooseItems[i].itemIndex;
this.columns.push(obj)
}
} else {
this.$message({
message: res.message,
icon: 'error',
timeout: 1500,
});
}
});
},
/*进行非空的判单*/
if (JSON.stringify(this.surePickItem ) == "{}"){
Toast.fail('请点击选择步骤');
return
}
// 在div 中赋值则可以这样:
<div class="chooseResult boldFontRed" v-if="JSON.stringify(this.surePickItem ) == '{}'">以上步骤未选择</div>
<div class="chooseResult" v-else> <span class="boldFont">{{surePickItem.text}}</span></div>