解决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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
原生js实现轮播图
Feb 27 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
vue移动端使用canvas签名的实现
Jan 15 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后门URL的防范
2013/11/12 PHP
php制作动态随机验证码
2015/02/12 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
JavaScript数据结构与算法之链表
2016/01/29 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python列表的常用操作方法小结
2016/05/21 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python线程中同步锁详解
2018/04/27 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
python自动发微信监控报警
2019/09/06 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
Python和Bash结合在一起的方法
2020/11/13 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
建筑人员岗位职责
2013/12/25 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
入党现实表现材料
2014/12/23 职场文书
出纳岗位职责范本
2015/03/31 职场文书
反邪教学习心得体会
2016/01/15 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android