From 9c82df0a7a204d193d0dd28b96ebf279246c7f0a Mon Sep 17 00:00:00 2001
From: webfansplz <308241863@qq.com>
Date: Wed, 18 Jan 2023 14:07:07 +0800
Subject: [PATCH] fix: prevent default event when hide dropdown (#1277)

---
 components/common/CommonMask.vue | 13 ++++++++++++
 components/user/UserDropdown.vue |  6 +++++-
 composables/mask.ts              | 34 ++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 components/common/CommonMask.vue
 create mode 100644 composables/mask.ts

diff --git a/components/common/CommonMask.vue b/components/common/CommonMask.vue
new file mode 100644
index 00000000..a2f926ba
--- /dev/null
+++ b/components/common/CommonMask.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const {
+  zIndex = 100,
+  background = 'transparent',
+} = $defineProps<{
+  zIndex?: number
+  background?: string
+}>()
+</script>
+
+<template>
+  <div fixed top-0 bottom-0 left-0 right-0 :style="{ background, zIndex }" />
+</template>
diff --git a/components/user/UserDropdown.vue b/components/user/UserDropdown.vue
index 9c427469..e02dc61d 100644
--- a/components/user/UserDropdown.vue
+++ b/components/user/UserDropdown.vue
@@ -1,5 +1,9 @@
+<script setup lang="ts">
+const mask = useMask()
+</script>
+
 <template>
-  <VDropdown :distance="0" placement="top-start" strategy="fixed">
+  <VDropdown :distance="0" placement="top-start" strategy="fixed" @apply-show="mask.show()" @apply-hide="mask.hide()">
     <button btn-action-icon :aria-label="$t('action.switch_account')">
       <div :class="{ 'hidden xl:block': currentUser }" i-ri:more-2-line />
       <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 square />
diff --git a/composables/mask.ts b/composables/mask.ts
new file mode 100644
index 00000000..9534abc0
--- /dev/null
+++ b/composables/mask.ts
@@ -0,0 +1,34 @@
+import { h, render } from 'vue'
+import CommonMask from '~/components/common/CommonMask.vue'
+
+export interface UseMaskOptions {
+  getContainer?: () => HTMLElement
+  background?: string
+  zIndex?: number
+}
+
+export function useMask(options: UseMaskOptions = {}) {
+  const {
+    background = 'transparent',
+    getContainer = () => document.body,
+    zIndex = 100,
+  } = options
+  const wrapperEl = (process.server ? null : document.createElement('div')) as HTMLDivElement
+
+  function show() {
+    const container = getContainer()
+    container?.appendChild(wrapperEl)
+    const MaskComp = h(CommonMask, { background, zIndex })
+    render(MaskComp, wrapperEl)
+  }
+
+  function hide() {
+    render(null, wrapperEl)
+    wrapperEl.parentNode?.removeChild(wrapperEl)
+  }
+
+  return {
+    show,
+    hide,
+  }
+}