移動端點擊彈窗--進行選擇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>

 
如有不會的BUG ,付費解決平台  請聯系 15972144786