解决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中callee与caller的用法和应用场景
Dec 08 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
js实现无缝轮播图效果
Mar 09 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写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
MooTools 1.2介绍
2009/09/14 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
Flask解决跨域的问题示例代码
2018/02/12 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python一些性能分析的技巧
2020/08/30 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
高中生毕业自我鉴定范文
2013/12/22 职场文书
企业内控岗位的职责
2014/02/07 职场文书
消防安全责任书
2014/04/14 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang