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> < ...
随机推荐
- 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_07.入门案例中使用的组件介绍
这里配置上注解的支持,相当于配置了上面的前端控制器.处理映射器这两个
- 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_05.入门程序之入门代码编写
先把默认的index.jsp删掉.默认的index.jsp没有jsp的声明 ok webapp文件夹下new一个 起名叫做index.新建的页面有jsp的头 创建控制器类 java下新建一个class ...
- 阶段3 2.Spring_01.Spring框架简介_06.spring的体系结构
资料内提供了spring 的开发包 docs:文档 libs:jar包 schema:约束
- playbook部署nginx
定义playbook的主机组 说明: 1.playbook的主机组和ansible的主机组不一样, 2.playbook的主机组文件必须要和playbook文件在同一个目录下否则会报如下错误: [ro ...
- unieap 建库
create tablespace unieap datafile 'unieap.dbf' size 100M reuse autoextend on next 50M;1. 2.drop user ...
- java:Topic About(猴子吃桃,快速排序,选择排序,插入排序)
1. 猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个 第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早上想再吃时,见只 ...
- 【神经网络与深度学习】【Matlab开发】caffe-windows使能Matlab2015b接口
[神经网络与深度学习][Matlab开发]caffe-windows使能Matlab2015b接口 标签:[神经网络与深度学习] [Matlab开发] 主要是想全部来一次,所以使能了Matlab的接口 ...
- (转)在Kubernetes集群中使用JMeter对Company示例进行压力测试
背景 压力测试是评估应用性能的一种有效手段.此外,越来越多的应用被拆分为多个微服务而每个微服务的性能不一,有的微服务是计算密集型,有的是IO密集型. 因此,压力测试在基于微服务架构的网络应用中扮演着越 ...
- 如何在CBV中使用装饰器
要区分函数装饰器和方法装饰器得区别 ,方法装饰器得第一个参数是self本身,所以函数装饰器不能用
- 10大IT社区
技术社区导航 http://tooool.org/ 1. cnblogs 人多内容质量最高 2.csdn csdn的注册人数多,但新手多 3.java eye java eye注册用户刚突破10万,但 ...