解决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 相关文章推荐
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
Javascript Object.extend
2010/05/18 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
10个示例带你掌握python中的元组
2020/11/23 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
自我反省检讨书
2014/01/23 职场文书
运动会口号大全
2014/06/07 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书