解决VantUI popup 弹窗不弹出或无蒙层的问题


Posted in Javascript onNovember 03, 2020

背景

####组件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:

解决VantUI popup 弹窗不弹出或无蒙层的问题

效果图:

解决VantUI popup 弹窗不弹出或无蒙层的问题

以上的列子 都是小生自己实践 ,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 #Javascript
使用vant的地域控件追加全部选项
Nov 03 #Javascript
vue vant中picker组件的使用
Nov 03 #Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 #Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 #Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 #Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 #Javascript
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Python lxml模块安装教程
2015/06/02 Python
python入门教程之识别验证码
2017/03/04 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python网络应用开发知识点浅析
2019/05/28 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python实现密码强度校验
2020/03/18 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
高三政治教学反思
2014/02/06 职场文书
党员党性分析材料
2014/02/17 职场文书
三项教育活动实施方案
2014/03/30 职场文书
爱我中华教学反思
2014/04/28 职场文书
跑操口号
2014/06/12 职场文书
2015年女生节活动总结
2015/02/27 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
教你用Python matplotlib库制作简单的动画
2021/06/11 Python