fix: prevent default event when hide dropdown (#1277)

This commit is contained in:
webfansplz 2023-01-18 14:07:07 +08:00 committed by GitHub
parent bc08ef07d3
commit 9c82df0a7a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 1 deletions

View 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>

View file

@ -1,5 +1,9 @@
<script setup lang="ts">
const mask = useMask()
</script>
<template> <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')"> <button btn-action-icon :aria-label="$t('action.switch_account')">
<div :class="{ 'hidden xl:block': currentUser }" i-ri:more-2-line /> <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 /> <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 square />

34
composables/mask.ts Normal file
View 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,
}
}