解决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 获取事件对象的注意点
Jul 29 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
javascript常用方法汇总
Dec 02 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
在Angular项目使用socket.io实现通信的方法
Jan 05 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 set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php数组删除元素示例
2014/03/21 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
Vue2几种常见开局方式详解
2017/09/09 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Python最基本的输入输出详解
2015/04/25 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python取代netcat过程分析
2018/02/10 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
环保建议书600字
2014/05/14 职场文书
行政求职信
2014/07/04 职场文书
战略合作意向书
2014/07/29 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
运动会闭幕式主持词
2015/07/01 职场文书