vanpopup 高度_解决VantUI popup 弹窗不弹出或无蒙层的问题

背景

####组件PopupTime.vue

把vant官网的popup+时间选择器抽成组件：

popup1show: true 即弹窗显示

:title="popupTitle.popupName"

v-model="currentDate"

type="datetime"

@cancel="onCancel" @confirm="onConfirm" class="font14"/>

export default {

props:{

popupTitle:Object,

data() {

return {

popup1show: true,

currentDate: new Date(),

};

methods：{

clickOverlay() {

this.onCancel();

onCancel() {},

onConfirm(value, index) {},

}

test.vue调用该组件

v-show="isShowDelay"

:popupTitle="popupDelayT"

@PopupDelayTime="fromDelayT">

//import PopupTime组件，并在components中注册

看似没什么问题，但出现isShowDelay为rue时，弹窗显示没有蒙层，第二次点击就点不开了。

问题解决

以为是vant的问题，找了半天结果是v-show的问题，改成v-if就没问题了。

v-if="isShowDelay"

:popupTitle="popupDelayT"

@PopupDelayTime="fromDelayT">

//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);

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

:overlay:false or true看个人需求

title:根据你自己需求定义

js:

效果图：

以上的列子都是小生自己实践，希望能给大家一个参考，也希望大家多多支持云海天教程。

原文链接：https://blog.csdn.net/HYeeee/article/details/82747345

vanpopup 高度_解决VantUI popup 弹窗不弹出或无蒙层的问题相关推荐

android弹出键盘高度,Android 解决全面屏软键盘弹出会有高度约50dp的白条。
效果对比图片先走解决前效果图 T_X0~JU{WQ2FC1W$M})J%1S.jpg 解决完成后效果图 0EBFD68FC050B16866B81321E0FD9C62.jpg /** * @aut ...
彻底解决WPS Office Expansion tool弹出问题！
彻底解决WPS Office Expansion tool弹出问题! 装有WPS的同学,在为了安全没有关闭用户账户控制的情况下,可能碰到一天内经常弹出WPS Office Expansion tool ...
如何用python做无限弹窗_python弹出框
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! super(winform, self).init(parent) self.r ...
解决Word 2007启动时弹出“无法访问您试图使用功能所在的网络位置”的问题...
解决Word 2007启动时弹出"无法访问您试图使用功能所在的网络位置"的问题... 参考文章: (1)解决Word 2007启动时弹出"无法访问您试图使用功能所在的网络 ...
php jquery实现弹窗,jquery 弹出层实现代码_jquery
经过分析,网上的参考,终于搞定了~~ jQuery插件代码: jQuery.fn.selectItem = function(targetId) { var _seft = this; var tar ...
小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢，在Bootstrap模态框内部多次点击才能触发的问题
小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题参考文章: (1)小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢, ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
Bootstrap—解决下拉菜单不弹出问题
最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: &l ...
解决点击EditText不弹出键盘，但现实光标闪烁的问题
好长时间没写博客了,其实博客这个东西有点过时了,说实话,但是先写一段时间把!下一篇写一下这段时间的新的和感悟, 解决点击EditText不弹出软键盘,但实现光标闪烁的问题. 写之前先吐槽一下CSDN和 ...

vanpopup 高度_解决VantUI popup 弹窗不弹出或无蒙层的问题

vanpopup 高度_解决VantUI popup 弹窗不弹出或无蒙层的问题相关推荐

最新文章

热门文章