feat: 增加侧滑点击外部关闭的功能

1.增加：config-account、config-promserver、alert-rule

nezha-fronted/src/components/common/rightBox/alertConfigBox.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-alert-config" v-if="rightBox.show">
+    <div class="right-box right-box-alert-config" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button type="button" v-if="alertRule.id != '' && rightBox.isEdit" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -57,7 +57,7 @@
             <el-form-item :label="$t('alert.severity')" prop="severity">
               <el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.severity" placeholder=""  size="small">
                 <el-option :id="'alert-severity-'+item.key" v-for="item in severityData" :key="item.key" :label="item.value" :value="item.key">
-                  <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
+                  <template v-if="!item.isEdit">{{item.value}}</template>
                   <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
                     <el-input type="text" v-model="item.name" size="mini"></el-input>
                   </span>
@@ -207,6 +207,9 @@
       }
     },
     methods: {
+      clickos() {
+        this.rightBox.show = false;
+      },
       show(show, isEdit) {
         this.rightBox.show = show;
         this.rightBox.isEdit = isEdit;

nezha-fronted/src/components/common/rightBox/dcBox.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-dc" v-if="rightBox.show">
+    <div class="right-box right-box-dc" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button id="dc-del" type="button" v-if="currentDc.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -101,6 +101,7 @@
         },
         rightBox: {
           show: false,
+          firstShow: false,
           title: '',
           isEdit: false
         },
@@ -162,10 +163,13 @@
         this.rightBox.show = show;
         this.rightBox.isEdit = isEdit;
       },
-
+      clickos() {
+        //this.rightBox.show = false;
+      },
       /*关闭弹框*/
       esc() {
         this.rightBox.show = false;
+        this.rightBox.firstShow = false;
       },
 
       /*弹出选择area弹框*/

nezha-fronted/src/components/page/config/account.vue

@@ -85,7 +85,7 @@
     </div>
 
     <transition name="right-box">
-      <div class="right-box right-box-account" v-if="rightBox.show">
+      <div class="right-box right-box-account" v-if="rightBox.show" v-clickoutside="clickos">
         <!-- begin--顶部按钮-->
         <div class="right-box-top-btns">
           <button type="button" v-if="user.userId != '' && rightBox.isEdit" @click="del(user)"
@@ -308,6 +308,9 @@
         this.$store.commit('setHeaderTable', data);
         this.tablelable = data;
       },
+      clickos() {
+        this.rightBox.show = false;
+      },
       edit: function (u) {
         this.user = Object.assign({}, u);
         this.rightBox.isEdit = true;

nezha-fronted/src/components/page/config/promServer.vue

@@ -78,7 +78,7 @@
     </div>
 
     <transition name="right-box">
-      <div class="right-box right-box-prom" v-if="rightBox.show">
+      <div class="right-box right-box-prom" v-if="rightBox.show" v-clickoutside="clickos">
         <!-- begin--顶部按钮-->
         <div class="right-box-top-btns">
           <button type="button" v-if="rightBox.isEdit && promServer.id != ''" @click="del(promServer)"
@@ -364,6 +364,9 @@
         this.$store.commit('setHeaderTable', data);
         this.tablelable = data;
       },
+      clickos() {
+        this.rightBox.show = false;
+      },
       toEdit: function (u) {
         this.promServer = Object.assign({}, u);
         this.rightBox.isEdit = true;

nezha-fronted/src/main.js

@@ -65,13 +65,28 @@ Vue.use(ElementUI);
 Vue.use(Vuex);
 Vue.use(VueResource);
 
+const exceptClassName = [];
 const clickoutside = {
   // 初始化指令
   bind(el, binding, vnode) {
     function documentHandler(e) {
-      // 这里判断点击的元素是否是本身，是本身，则返回
       if (el.contains(e.target)) {
         return false;
+      } else {
+        let flag = true;
+        let attrs = e.target.attributes;
+        for (let i = 0; i < attrs.length; i++) {
+          if (attrs[i].name == 'class') {
+            console.info(attrs[i].value)
+            if ((attrs[i].value + '').indexOf("el-select-dropdown") != -1) {
+              flag = false;
+              break;
+            }
+          }
+        }
+        if (!flag) {
+          return false;
+        }
       }
       // 判断指令中是否绑定了函数
       if (binding.expression) {
@@ -87,11 +102,11 @@ const clickoutside = {
 
     // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
     el.__vueClickOutside__ = documentHandler;
-    document.addEventListener('click', documentHandler);
+    document.addEventListener('mousedown', documentHandler);
   },
   unbind(el, binding) {
     // 解除事件监听
-    document.removeEventListener('click', el.__vueClickOutside__);
+    document.removeEventListener('mousedown', el.__vueClickOutside__);
     delete el.__vueClickOutside__;
   },
 };