vue使用weui.js插件dialog和actionsheet、confirm、picker，页面销毁时自动隐藏

一、问题背景：

在项目中遇到问题，使用weui.js的dialog 和 actionsheet 插件，使用手机的物理退回键或者网页的回退键，提示框不会自动隐藏。

二、解决方法：

针对Dialog、confirm：

添加全局变量weuijsDialog，当页面关闭时，自动隐藏。
在全局install.js文件中

export default {
   Vue.mixin({
     data() {
          return {
            weuijsDialog:null, //添加全局变量weuijsDialog
          }
        },

   beforeDestroy(){
          if(this.weuijsDialog){
            this.weuijsDialog.hide();
            this.weuijsDialog = null;
          }
  } ）
}

针对actionsheet、picker，

不能使用全局定义的方法，要通过dom定位的方法，使组件出现及隐藏；
在mixins文件中添加方法

//value指的是 picker 或者 actionsheet
// state 指的是 visible 或者 hidden
    mixin_weuijs_picker_actionsheet(value,state){
      let mask = document.getElementsByClassName('weui-mask')[0];
      let picker= document.getElementsByClassName('weui-'+ value)[0];
      mask && (mask.style.visibility = state); 
      picker && (picker.style.visibility = state);
    },

三、具体使用时

针对Dialog、confirm：

//让全局变量 this.weuijsDialog 等于 this.$weuijs.alert
 this.weuijsDialog = this.$weuijs.alert(
              '' +
              '
' +
              '
到院取药
' +
              '
您可以携带相关就医证件，前往衢州市人民医院药房取药。或者您也可以选择“送药到家”
', {
                isAndroid: false,
                buttons: [
                  {label: '我知道了', type: 'primary'}
                ]
              })

针对actionsheet、picker：

  export default {
      handler(type) {
        let {form} = this;
        switch (type) {
          case 'time':
            this.$weuijs.datePicker({
              defaultValue: form.medicalTime.split('-'),
              onConfirm: (res) => {
                this.$set(this.form, 'medicalTime', res.map(r => r.value).map((r, i) => {
                  if (i == 1) return r < 10 ? `0${r}` : r;
                  else return r;
                }).join('-'));
              }
            });
//触发函数时将隐藏得picker显示出来
            this.mixin_weuijs_picker_actionsheet('picker','visible');
            break;
        }
      }
    },
//页面销毁时自动隐藏
    beforeDestroy(){
      this.mixin_weuijs_picker_actionsheet('picker','hidden');
    },
  }