前言

最近使用 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"
});

然后你点返回的时候弹出框不消失

查阅了相关文档和资料

  1. 可以指定weui插入的容器,这样当你在返回时就没有了。
  2. 监测路由变化,自动触发确定按钮的点击事件。

我是在返回那个页面 的  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 弹出框不消失的更多相关文章

  1. 关于隐式创建vue实例实现简化弹出框组件显示步骤

    我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...

  2. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  3. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  4. iPad弹出框

    弹出框是iPad的常用UI元素,即在现有视图上面显示内容,并通过一个小箭头指向一个屏幕对象(如按钮),以提供上下文. 和模态场景一样,弹出框的内容也由一个视图和一个试图控制器决定,不同之处在于,弹出框 ...

  5. elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字

    elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...

  6. vue弹出框的封装

    依旧是百度不到自己想要的,就自己动手丰衣足食 弹出框做成单独的组件confirm.vue; <template> <transition name="mask-bg-fad ...

  7. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  8. vue封装公用弹出框方法,实现点击出现操作弹出框

    vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...

  9. [ vue ] Quasar封装q-dialog组件,在外层实现弹出框的开启和关闭

    场景描述: 见:https://www.cnblogs.com/remly/p/12981582.html 具体实现: <!-- 父组件 --> <template> < ...

随机推荐

  1. Python学习-------变量和简单的数据类型(String)

    1.变量命名和使用 变量命名规则:a.变量名只能包含(字母    数字   下划线),且变量不能以数字开头,例如:变量 s_1(正确),变量1_s(错误) b.变量名不能包含空格,可以使用下划线来间隔 ...

  2. Loading——spin.js

    官网:[http://spin.js.org/] Github地址:[https://github.com/fgnass/spin.js]

  3. Java中File类的基本用法

    File类的基本用法 java.io.File类:代表文件和目录.在开发中,读取文件.生成文件.删除文件.修改文件的属性时经常会用到此类. File类的常用构造方法:public File(Strin ...

  4. mysql 关键字大全

    mysql无论表名,还是字段名都应该避开mysql关键字. 如字段使用关键字,sql查询需加上` `.   查询插件,当使用关键字,会报错. usage

  5. excel常用公式--逻辑运算类

    if:  IF(logical_test, value_if_true, [value_if_false]). and: 逻辑判断,相当于“并”. or: 逻辑判断,相当于“或”.

  6. CSS基本样式-背景属性

    代码是敲出来的,建议一个一个过一遍 背景属性 背景颜色 background-color 背景颜色 默认值是transparent(透明的) 示例代码 <!DOCTYPE html> &l ...

  7. Node.js使用redis进行订阅发布管理

    redis NPM 官方介绍地址:https://www.npmjs.com/package/redis let redis = require('redis'); let subscriber; l ...

  8. GTS原理、架构

    全局事务服务(Global Transaction Service,简称 GTS)是阿里新推出的分布式事务处理方案. 1. GTS 的目标 GTS是一个面向互联网交易场景的分布式事务解决方案. 制约分 ...

  9. CF 1178E Archaeology 题解

    题面 这道题竟然是E?还是洛谷中的黑题? wow~!! 于是就做了一下: 然后一下就A了:(这并不代表想的容易,而是写的容易) 这道题就是骗人的!! 什么manacher,什么回文自动机,去靠一边站着 ...

  10. 【golang】浅析rune数据类型

    golang中string底层是通过byte数组实现的.中文字符在unicode下占2个字节,在utf-8编码下占3个字节,而golang默认编码正好是utf-8. golang中还有一个byte数据 ...