解决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 性能优化手册 推荐
Feb 23 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
在Python中处理XML的教程
2015/04/29 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
python logging添加filter教程
2019/12/24 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
Python文件操作的面试题
2013/06/22 面试题
书法社团活动总结
2015/05/07 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python