feat: 所有侧滑增加点击外部后关闭的事件

nezha-fronted/src/assets/stylus/main.scss

@@ -1134,3 +1134,7 @@ li{
 .el-textarea textarea {
   height: 140px !important;
 }
+/*el-data-picker选中背景色*/
+.el-date-table td.current:not(.disabled) span {
+  background-color: $global-text-color-active;
+}

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box-840">
-    <div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)">
+    <div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
       </div>
@@ -337,6 +337,10 @@
         this.editParamBox.show = show;
       },
 
+      clickos() {
+        this.esc();
+      },
+
       /*关闭弹框*/
       esc() {
         this.rightBox.show = false;

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

@@ -36,7 +36,7 @@
             </el-form-item>
             <!--linkedId-->
             <el-form-item :label="$t('alert.config.link')" prop="linkId">
-              <el-select v-if="rightBox.isEdit" v-model="alertRule.linkId" placeholder="" size="small">
+              <el-select v-if="rightBox.isEdit" v-model="alertRule.linkId" placeholder="" size="small" popper-class="config-dropdown">
                 <el-option :id="'alert-linke-'+item.id" v-for="item in linkObjList" :key="item.id" :label="alertRule.type == 3 ? item.host : item.name" :value="item.id"></el-option>
               </el-select>
               <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject ? alertRule.linkObject.name : ''}}</div>

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box-580">
-    <div class="right-box right-box-add-asset" v-if="editUnitShow" @click="editQuit" id="asset-edit-quit">
+    <div class="right-box right-box-add-asset" v-if="editUnitShow" @click="editQuit" id="asset-edit-quit" v-clickoutside="clickos">
       <!--顶部按钮-->
       <div class="right-box-top-btns">
         <button v-if="!tabView && pageObj.id" type="button" @click="deleteData('asset', pageObj.id)" id="asset-edit-del"
@@ -650,6 +650,9 @@
       }
     },
     methods: {
+      clickos() {
+        this.sendStateData('close');
+      },
       cancelEdit(data) {
         if (data === false) {
           this.getAssetTypeOptionData();

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

@@ -164,7 +164,7 @@
         this.rightBox.isEdit = isEdit;
       },
       clickos() {
-        //this.rightBox.show = false;
+        this.rightBox.show = false;
       },
       /*关闭弹框*/
       esc() {

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-edit-endpoint" v-if="rightBox.show">
+    <div class="right-box right-box-edit-endpoint" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button id="edit-ep-del" type="button" v-if="rightBox.isEdit && endpoint.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -235,6 +235,10 @@
         this.subBox.show = false;
       },
 
+      clickos() {
+        this.esc();
+      },
+
       // 清除param
       clearAllParam() {
         this.endpoint.paramObj = [];

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-module" v-if="rightBox.show">
+    <div class="right-box right-box-module" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button id="module-del" type="button" v-if="module.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">
@@ -140,6 +140,10 @@
         this.rightBox.show = false;
       },
 
+      clickos() {
+        this.esc();
+      },
+
       /*保存*/
       save() {
         this.module.param = this.paramToJson(this.module.paramObj);

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

@@ -1,6 +1,6 @@
 <template key="panelBox">
   <transition name="right-box-580">
-    <div class="right-box right-box-panel z-top" v-if="rightBox.show">
+    <div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -59,6 +59,9 @@
       setTitle(title) {
         this.rightBox.title = title;
       },
+      clickos() {
+        this.esc();
+      },
       //面板相关方法
       del: function(u) {
         this.$confirm(this.$t("tip.confirmDelete"), {

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-project" v-if="rightBox.show">
+    <div class="right-box right-box-project" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button id="project-del" type="button" v-if="project.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">
@@ -71,6 +71,10 @@
         this.rightBox.isEdit=isEdit;
       },
 
+      clickos() {
+        this.esc();
+      },
+
       /*关闭弹框*/
       esc() {
         this.rightBox.show = false;

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -53,7 +53,7 @@
   }
 </style>
 <template key="chartBox">
-  <div>
+  <div v-clickoutside="clickos">
     <panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
 
     <transition name="right-box">
@@ -270,6 +270,9 @@
       show(show) {
         this.rightBox.show = show;
       },
+      clickos() {
+        this.esc();
+      },
       toAddPanel() {
         this.$refs.panelBox2.show(true);
         this.panel = {

nezha-fronted/src/main.js

@@ -65,7 +65,7 @@ Vue.use(ElementUI);
 Vue.use(Vuex);
 Vue.use(VueResource);
 
-const exceptClassName = []; //clickoutside排除的class
+const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown']; //clickoutside排除的class(白名单)
 const clickoutside = {
   // 初始化指令
   bind(el, binding, vnode) {
@@ -73,14 +73,13 @@ const clickoutside = {
       if (el.contains(e.target)) {
         return false;
       } else {
+        console.info(e)
         let flag = true;
-        let attrs = e.target.attributes;
+        top: for (let i = 0; i < e.path.length; i++) {
-        for (let i = 0; i < attrs.length; i++) {
+          for (let j = 0; j < exceptClassName.length; j++) {
-          if (attrs[i].name == 'class') {
+            if (e.path[i].className && e.path[i].className.indexOf(exceptClassName[j]) != -1) {
-
-            if ((attrs[i].value + '').indexOf("el-select-dropdown") != -1) {
               flag = false;
-              break;
+              break top;
             }
           }
         }