fix: prevent default event when hide dropdown (#1277)
This commit is contained in:
parent
bc08ef07d3
commit
9c82df0a7a
13
components/common/CommonMask.vue
Normal file
13
components/common/CommonMask.vue
Normal file
|
@ -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>
|
|
@ -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 />
|
||||
|
|
34
composables/mask.ts
Normal file
34
composables/mask.ts
Normal file
|
@ -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,
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue