前言
最近使用 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); } }
这样就解决了,有点投机取消的感觉,但也是解决了