解决VantUIpopup弹窗不弹出或⽆蒙层的问题背景
####组件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() {
},
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:
效果图：
以上的列⼦都是⼩⽣⾃⼰实践，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。