Vue使用 weui picker 弹出框不消失
前言
最近使用 weui 里面的 datepicker 组件的时候遇到了一个问题:
弹出来 选择年月日的框之后,直接点击导航上的“返回” 按钮,picker 选框不消失,也就是弹出框不消失
weui.datePicker({
start: 1900, // 从今天开始
end: 2030,
defaultValue: dayArray,
//cron: "* * 0,6", // 每逢周日、周六
onChange: function(result) {},
onConfirm: function(result) {
_self.signData.requiredFields[index].val =
result[0].value + "-" + result[1].value + "-" + result[2].value;
_self.$forceUpdate();
},
id: "datePicker"
});
然后你点返回的时候弹出框不消失
查阅了相关文档和资料
- 可以指定weui插入的容器,这样当你在返回时就没有了。
- 监测路由变化,自动触发确定按钮的点击事件。
我是在返回那个页面 的 mounted()的方法里面。代码如下:
mounted() {
// new Mdate("dateSelectorOne");
let _this = this;
let mask = document.getElementsByClassName("weui-mask")[0];
let picker = document.getElementsByClassName("weui-picker")[0];
if (mask && picker) {
var btn = document.getElementsByClassName("weui-picker__action")[0]
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
console.log(btn.dispatchEvent(e))
btn.dispatchEvent(e);
}
}
这样就解决了,有点投机取消的感觉,但也是解决了
Vue使用 weui picker 弹出框不消失的更多相关文章
- 关于隐式创建vue实例实现简化弹出框组件显示步骤
我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
- vue--vant组件库Dialog弹出框
安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...
- iPad弹出框
弹出框是iPad的常用UI元素,即在现有视图上面显示内容,并通过一个小箭头指向一个屏幕对象(如按钮),以提供上下文. 和模态场景一样,弹出框的内容也由一个视图和一个试图控制器决定,不同之处在于,弹出框 ...
- elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字
elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...
- vue弹出框的封装
依旧是百度不到自己想要的,就自己动手丰衣足食 弹出框做成单独的组件confirm.vue; <template> <transition name="mask-bg-fad ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- vue封装公用弹出框方法,实现点击出现操作弹出框
vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...
- [ vue ] Quasar封装q-dialog组件,在外层实现弹出框的开启和关闭
场景描述: 见:https://www.cnblogs.com/remly/p/12981582.html 具体实现: <!-- 父组件 --> <template> < ...
随机推荐
- runoob_Java 方法
可变参数 JDK 1.5 开始,Java支持传递同类型的可变参数给一个方法. 方法的可变参数的声明如下所示: typeName... parameterName 在方法声明中,在指定参数类型后加一个省 ...
- 网易云课堂_C++程序设计入门(下)_第11单元:工欲善其事必先利其器 - STL简介_第11单元 - 单元作业2:OJ编程 - list 与 deque
第11单元 - 单元作业2:OJ编程 - list 与 deque 查看帮助 返回 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之 ...
- 微信小程序组件篇实战
实现效果如下: 实现代码如下: index.wxml: <!--index.wxml--> <view class="container"> <vie ...
- XMLHttpRequest 对象相关
XMLHttpRequest 对象用于在后台与服务器交换数据. 后台 package com.java1234.web; import java.io.IOException; import java ...
- WEB应用服务器都有哪些?
大型WEB服务器在UNIX和Linux平台下使用最广泛的免费HTTP服务器是W3C.NCSA和APACHE服务器,而Windows平台NT/2000/2003使用IIS的WEB服务器.在选择使用WEB ...
- 使用vue做项目如何提高代码效率
最近做了两个vue项目,算上之前做的两个项目,总共有四个vue项目的经验了,但是总体来说写的代码质量不是很高,体现在以下几点 1.代码没有高效的复用 自从使用vue做项目之后,以前使用面向过程变成的习 ...
- 【PyTorch】PyTorch使用LMDB数据库加速文件读取
PyTorch使用LMDB数据库加速文件读取 原始文档:https://www.yuque.com/lart/ugkv9f/hbnym1 对于数据库的了解较少,文章中大部分的介绍主要来自于各种博客和L ...
- 【Qt开发】QString与数字类型的转换(不同进制)
把QString转换为 double类型 方法1.QString str="123.45"; double val=str.toDouble(); //val=123.45 方法2 ...
- 手把手带你发布Nuget包-图文说话
博客:https://www.cnblogs.com/24klr/
- 记录一些Xampp的使用过程和遇到的问题
1.Xmapp需要安装在C盘的Xampp目录,否则很容易出错,一定要在C:/xampp,这样Apache和MySQL才能正常启动,和错误提示的端口冲突或者路径错误无关. 2.Xmapp尽量选择低版本的 ...