VantUI項(xiàng)目中popup 彈窗不彈出問(wèn)題怎么解決

VantUI項(xiàng)目中popup 彈窗不彈出問(wèn)題怎么解決？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

背景

組件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è)

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

問(wèn)題解決

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

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

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

v-if vs v-show

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

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

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

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

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

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

初學(xué)前端的小伙伴肯定遇到過(guò)這樣的問(wèn)題吧，想寫(xiě)一個(gè)下拉，又想寫(xiě)一個(gè)遮罩。兩個(gè)合起來(lái)用，然后寫(xiě)一個(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:

效果圖：

看完上述內(nèi)容，你們掌握VantUI項(xiàng)目中popup 彈窗不彈出問(wèn)題怎么解決的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！