前言

最近使用 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. 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_08.RequestMapping注解的作用

    用于建立请求URL和处理请求方法之间的对应关系. 增加一个testResuqestMapping方法来测试 把注解放在类上 服务器重新部署 再次重新部署 这次就可以请求到数据 了 注解放在类上:用来表 ...

  2. harbor无法登陆解决

    添加如下内容 [root@bogon ~]# vi /etc/docker/daemon.json { "registry-mirrors": ["https://wb2 ...

  3. 移动手机端通过PC转接实现标签打印的解决方案

    废话不多讲,由于种种原因项目上出现了移动手持录入标签信息通过pc端转接实现打印的需求,所以简单研究了一下,本来考虑使用webapi方式实现,但是发现这种方式调用打印机实现自动打印比较困难,所以转而求其 ...

  4. Unity中的动画系统和Timeline(4) AvatarMask和IK动画

    AvatarMask(骨骼遮罩) 在前面角色动画的基础上,角色在奔跑过程中捡起一块木头,双手要抱着这块木头.如果使用前面的方法,直接切换动画,那么就只剩下抱木头的动画,其它动画就没了.这时我们要使用下 ...

  5. vue --》elementUI 中 el-table组件 如何实现点击列,让该列高亮显示 ?

    在elmentui官网中,只给了让当前行高亮显示的方法,但是如何让当前列高亮显示呢? <template> <div> <el-table :data="tab ...

  6. linux netstat 查看端口

    1. netstat命令用于显示系统的网络信息,包括网络连接 .路由表 .接口状态2. 一般我们使用 netstat 来查看本机开启了哪些端口,查看有哪些客户端连接 [root@localhost ~ ...

  7. python 并发编程 多线程 多线程实现并发的套接字通信

    进程内会生成一个主线程,让主线程执行server函数,server函数核心是accept(),让主线程干accept的工作, 建立连接,每建立一个连接应该执行通信函数 每建立一个连接就是生成一个子线程 ...

  8. 索引之----mysql单列索引失效的情况

    使用的索引名称: 1.隐式转换导致索引失效. 由于表字段定义为vachar类型,但在查询时把该字段作为number类型 以及where条件传给mysql. 2.对索引列进行任何操作(计算(+.-.*. ...

  9. 初步学习jquery学习笔记(五)

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

  10. 记一次程序从x86_64linux平台移植到armv7平台

    前言 最近接了个任务,需要把代码移植到armv7平台,搜寻相关方法,了解到可以利用交叉编译工具如:gcc-linaro-arm-linux-gnueabihf.把自己依赖的第三方库代码和自己代码分别编 ...