背景

####元件PopupTime.vue

把vant官網的popup+時間選擇器抽成元件：

popup1show: true 即彈窗顯示

<template>
 <div class="PopupTime">
  <van-popup v-model="popup1show" position="bottom" :overlay="true" @click-overlay="clickOverlay">
   <van-datetime-picker show-toolbar
         :title="popupTitle.popupName"
         v-model="currentDate"
         type="datetime"
         @cancel="onCancel" @confirm="onConfirm" class="font14"/>
  </van-popup>
 </div>
</template>

<script type="text/ecmascript-6">

 export default {
  props:{
   popupTitle:Object,},data() {
   return {
    popup1show: true,currentDate: new Date(),};
  },methods：{
 clickOverlay() {
 this.onCancel();
 },onCancel() {},onConfirm(value,index) {},}
 </script>

test.vue呼叫該元件

 <popup-time 
 v-show="isShowDelay" 
 :popupTitle="popupDelayT"
 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime元件，並在components中註冊

看似沒什麼問題，但出現isShowDelay為rue時，彈窗顯示沒有蒙層，第二次點選就點不開了。

問題解決

以為是vant的問題，找了半天結果是v-show的問題，改成v-if就沒問題了。

 <popup-time 
 v-if="isShowDelay" 
 :popupTitle="popupDelayT"
 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime元件，並在components中註冊

奇奇怪怪的問題，去官網上瞅一眼：

v-if vs v-show

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

嗯。。。。還是不懂這個問題是怎麼出現的？？

補充知識：vant--------Picker與Popup 選擇器和遮罩的完美結合

初學前端的小夥伴肯定遇到過這樣的問題吧，想寫一個下拉，又想寫一個遮罩。兩個合起來用，然後寫一個遮罩height:100%,width:100%,z-index:999,等等去定

繁瑣又麻煩 體驗感還不一定加

將vant 的picker 與popup集合 方便快捷實用

1.在main.js 裡引入

import { Popup } from 'vant';
Vue.use(Popup);
import { Picker } from 'vant'; 
Vue.use(Picker);

2.

<van-popup v-model="show" position="bottom" :overlay="true">
 <van-picker show-toolbar title="請選擇區域代理城市" :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange" />
</van-popup>

position:你可以自己定義 top or bottom or center 當然一般是bottom

:overlay:false or true看個人需求

title:根據你自己需求定義

js:

效果圖：

以上的列子 都是小生自己實踐 ，希望能給大家一個參考，也希望大家多多支援我們。