解決VantUI popup 彈窗不彈出或無蒙層的問題

更新時(shí)間：2020年11月03日 10:37:16 作者：HYeeee

這篇文章主要介紹了解決VantUI popup 彈窗不彈出或無蒙層的問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

背景

####組件PopupTime.vue

把vant官網(wǎng)的popup+時(shí)間選擇器抽成組件：

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調(diào)用該組件

 <popup-time 
 v-show="isShowDelay" 
 :popupTitle="popupDelayT"
 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime組件，并在components中注冊(cè)

看似沒什么問題，但出現(xiàn)isShowDelay為rue時(shí)，彈窗顯示沒有蒙層，第二次點(diǎn)擊就點(diǎn)不開了。

問題解決

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

 <popup-time 
 v-if="isShowDelay" 
 :popupTitle="popupDelayT"
 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime組件，并在components中注冊(cè)

奇奇怪怪的問題，去官網(wǎng)上瞅一眼：

v-if vs v-show

v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。

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

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

嗯。。。。還是不懂這個(gè)問題是怎么出現(xiàn)的？？

補(bǔ)充知識(shí)：vant--------Picker與Popup 選擇器和遮罩的完美結(jié)合

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

繁瑣又麻煩體驗(yàn)感還不一定加

將vant 的picker 與popup集合方便快捷實(shí)用

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="請(qǐng)選擇區(qū)域代理城市" :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange" />
</van-popup>

position:你可以自己定義 top or bottom or center 當(dāng)然一般是bottom

:overlay:false or true看個(gè)人需求

title:根據(jù)你自己需求定義

js: