前言

最近使用 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. fixture详细介绍-作为参数传入,error和failed区别

    前言 fixture是pytest的核心功能,也是亮点功能,熟练掌握fixture的使用方法,pytest用起来才会得心应手! fixture简介 fixture的目的是提供一个固定基线,在该基线上测 ...

  2. freetype HarfBuzz fontconfig Cairo 编译顺序

    There is also a circular dependency between freetype and HarfBuzz. Note that fontconfig and Cario ar ...

  3. Closure - Mimicking block scope

    The basic syntax of an anoymous function used as a block scope (often called a private scope) is as ...

  4. node在Web中的用途

    1.网站后台: user browser ——> application server(node开发的application,处理用户的所有请求和给用户的响应) 2.分发数据请求,渲染HTML: ...

  5. How do I add a Foreign Key Field to a ModelForm in Django?

    What I would like to do is to display a single form that lets the user: Enter a document title (from ...

  6. Redis 下载与配置window服务

    1.Redis下载 Git下载地址:https://github.com/MicrosoftArchive/redis/releases 2.配置Window服务 步骤一:在 Redis目录 输入 c ...

  7. P4878 [USACO05DEC] 布局

    题面lalala 这居然是个紫题???原谅我觉得这题是模板... 这个这个,这题的算法呢其实是一个叫差分约束的东西,也是今天下午我们机房的重点,如果不知道这个差分约束是个啥的人呢,自行百度一下谢谢.. ...

  8. 【神经网络与深度学习】【CUDA开发】【VS开发】Microsoft官方移植了Caffe配置过程说明

    想在Windows平台使用Caffe,吭哧吭哧下载了半天第三方库,后来忽然发现Microsoft官方移植了Caffe,配置起来简直太省心了- 1. 从Microsoft官方Github上下载Caffe ...

  9. 关于Tomcat配置问题

    一,部署并启动Tomcat服务器 Tomcat: 开源的 Servlet 容器. 解压 apache-tomcat-6.0.16.zip 到一个非中文目录下 配置一个环境变量. java_home(指 ...

  10. Laravel中一些要记住 的写法

    模型篇: 1.根据数据库部分URL返回完整的URL public function getImageUrlAttribute() { // 如果 image 字段本身就已经是完整的 url 就直接返回 ...