improve(leftbar): click outside close popover

emqx · Oct 27, 2022 · 56030f1 · 56030f1
1 parent 694e4f6
commit 56030f1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/components/Leftbar.vue b/src/components/Leftbar.vue
@@ -53,7 +53,12 @@
           </div>
         </div>
       </el-popover>
-      <div :class="[{ active: isAbout || isHelp }, 'leftbar-item']" v-popover:popover @click="visible = !visible">
+      <div
+        :class="[{ active: isAbout || isHelp }, 'leftbar-item']"
+        v-popover:popover
+        @click="visible = !visible"
+        v-click-outside="() => (visible = false)"
+      >
         <a href="javascript:;">
           <i class="iconfont icon-help"></i>
         </a>
@@ -65,9 +70,14 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
+import ClickOutside from 'vue-click-outside'
 import gaCustomLinks from '@/utils/gaCustomLinks'
 
-@Component
+@Component({
+  directives: {
+    ClickOutside,
+  },
+})
 export default class Leftbar extends Vue {
   @Getter('currentLang') private getterLang!: Language
 

diff --git a/web/src/components/Leftbar.vue b/web/src/components/Leftbar.vue
@@ -41,7 +41,12 @@
           </div>
         </div>
       </el-popover>
-      <div :class="[{ active: isAbout || isHelp }, 'leftbar-item']" v-popover:popover @click="visible = !visible">
+      <div
+        :class="[{ active: isAbout || isHelp }, 'leftbar-item']"
+        v-popover:popover
+        @click="visible = !visible"
+        v-click-outside="() => (visible = false)"
+      >
         <a href="javascript:;">
           <i class="iconfont icon-help"></i>
         </a>
@@ -53,8 +58,13 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
+import ClickOutside from 'vue-click-outside'
 
-@Component
+@Component({
+  directives: {
+    ClickOutside,
+  },
+})
 export default class Leftbar extends Vue {
   @Getter('currentLang') private getterLang!: Language