移动端点击弹窗--进行选择picker(vant)

实现此效果，是两个插件的组合使用：

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>

移动端点击弹窗--进行选择picker(vant)

搭配弹出层使用 Popup & picker

相关推荐