前言

最近使用 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. 使用apicloud开发移动端APP,IOS list页面滚动卡顿解决记录

    给内容容器添加样式:-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:属性控制元素在移动设备上是否使用滚动回弹效果. auto: ...

  2. Web01_HTML

    语法和规范: 1.所有的HTML文件后缀名都是以.html或者.htm结尾的,建议使用.html结尾 2.整个html文件分别由头部分<head></head>和体部分< ...

  3. 【Java基础】对象序列化与读写

    package com.test.io; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  4. 深入浅出JavaScript(中文版)__莫里森 初读笔记

    创建变量,使用关键字var; 创建常量,使用关键字const; 大驼峰用于对象,小驼峰用于变量和函数. 在试图相加数字时意外做了字符串相连,是种常见的JavaScript错误.如果想做数字相加,请确定 ...

  5. java:LeakFilling(JS,JQ)

    1.<a href="javascript:void(0)" onclick="dele();"> a标签不使用链接的时候,必须加javascrip ...

  6. Unity3D 旋转

    Unity有两种设置物体旋转的方式,一种时用Rotate()函数来旋转,另一种时直接构造目标Quaternion来直接赋予rotation. 好吧,不知到写什么,各种旋转和unity2D差不多.在国内 ...

  7. 第六周作业&实验报告四

    一.实验目的 (1)掌握类的继承 (2)变量的继承和覆盖,方法的继承,重载和覆盖的实现: 二.实验的内容 (1)根据下面的要求实现圆类Circle. 1.圆类Circle的成员变量:radius表示圆 ...

  8. Oracle恢复ORA-00600: 内部错误代码, 参数: [kcratr_scan_lastbwr] 问题的简单解决

    Oracle恢复ORA-00600: 内部错误代码, 参数: [kcratr_scan_lastbwr] 1. 简单处理 sqlplus / as sysdba startup mount recov ...

  9. axios中设置Content-Type不生效的问题

    Api:axios(config): config中无data字段时,headers里的Content-Type无效果,这应该出于优化的层面,此时的Content-Length=0,无需向服务端提供C ...

  10. noip2018day1-赛道修建

    题目描述 \(C\) 城将要举办一系列的赛车比赛.在比赛前,需要在城内修建 $m $条赛道. \(C\) 城一共有 \(n\) 个路口,这些路口编号为 \(1,2,-,n\)有 $n-1 $条适合于修 ...