feat: 为多个组件的 VMenu 添加 scrim 属性

This commit is contained in:
jxxghp
2025-04-13 09:42:58 +08:00
parent 3d7a0d9b0d
commit 8b53cd0a09
5 changed files with 10 additions and 9 deletions
+2 -2
View File
@@ -189,13 +189,13 @@ onMounted(() => {
</script> </script>
<template> <template>
<VMenu v-if="props.themes" class="theme-menu"> <VMenu v-if="props.themes" class="theme-menu" scrim>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<IconBtn v-bind="props"> <IconBtn v-bind="props">
<VIcon :icon="getThemeIcon" /> <VIcon :icon="getThemeIcon" />
</IconBtn> </IconBtn>
</template> </template>
<VList class="theme-switcher-list pt-0 border"> <VList class="theme-switcher-list pt-0">
<VCardItem class="theme-switcher-header"> <VCardItem class="theme-switcher-header">
<VCardTitle class="font-weight-medium text-primary">主题选择</VCardTitle> <VCardTitle class="font-weight-medium text-primary">主题选择</VCardTitle>
</VCardItem> </VCardItem>
+2 -2
View File
@@ -60,8 +60,8 @@ const currentPath = computed(() => route.path)
:icon="moreMenuDialog ? 'mdi-close' : 'mdi-dots-horizontal'" :icon="moreMenuDialog ? 'mdi-close' : 'mdi-dots-horizontal'"
:color="moreActiveState ? 'primary' : ''" :color="moreActiveState ? 'primary' : ''"
/> />
<VMenu v-model="moreMenuDialog" close-on-content-click activator="parent"> <VMenu v-model="moreMenuDialog" close-on-content-click activator="parent" scrim>
<VList class="font-bold border" lines="one"> <VList class="font-bold" lines="one">
<VListSubheader class="bg-transparent"> 更多 </VListSubheader> <VListSubheader class="bg-transparent"> 更多 </VListSubheader>
<VListItem <VListItem
class="pe-20 ps-5" class="pe-20 ps-5"
+2 -1
View File
@@ -113,6 +113,7 @@ onMounted(() => {
transition="scale-transition" transition="scale-transition"
close-on-content-click close-on-content-click
close-on-back close-on-back
scrim
> >
<!-- Menu Activator --> <!-- Menu Activator -->
<template #activator="{ props }"> <template #activator="{ props }">
@@ -121,7 +122,7 @@ onMounted(() => {
</IconBtn> </IconBtn>
</template> </template>
<!-- Menu Content --> <!-- Menu Content -->
<VCard class="shortcut-menu-card border"> <VCard class="shortcut-menu-card">
<VCardItem class="shortcut-header border-b"> <VCardItem class="shortcut-header border-b">
<VCardTitle class="font-weight-medium text-primary">捷径</VCardTitle> <VCardTitle class="font-weight-medium text-primary">捷径</VCardTitle>
<template #append> <template #append>
+2 -2
View File
@@ -41,7 +41,7 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
<VMenu v-model="appsMenu" width="400" transition="scale-transition" close-on-content-click class="notification-menu"> <VMenu v-model="appsMenu" width="400" transition="scale-transition" close-on-content-click class="notification-menu" scrim>
<!-- Menu Activator --> <!-- Menu Activator -->
<template #activator="{ props }"> <template #activator="{ props }">
<VBadge v-if="hasNewMessage" dot color="error" :offset-x="5" :offset-y="5" v-bind="props"> <VBadge v-if="hasNewMessage" dot color="error" :offset-x="5" :offset-y="5" v-bind="props">
@@ -54,7 +54,7 @@ onBeforeUnmount(() => {
</IconBtn> </IconBtn>
</template> </template>
<!-- Menu Content --> <!-- Menu Content -->
<VCard class="border"> <VCard>
<VCardItem class="notification-header"> <VCardItem class="notification-header">
<VCardTitle class="font-weight-medium text-primary">通知中心</VCardTitle> <VCardTitle class="font-weight-medium text-primary">通知中心</VCardTitle>
<template #append> <template #append>
+2 -2
View File
@@ -85,8 +85,8 @@ const userLevel = computed(() => userStore.level)
<VAvatar class="cursor-pointer ms-3" color="primary" variant="tonal"> <VAvatar class="cursor-pointer ms-3" color="primary" variant="tonal">
<VImg :src="avatar" /> <VImg :src="avatar" />
<VMenu activator="parent" width="230" location="bottom end" offset="14px" class="user-menu"> <VMenu activator="parent" width="230" location="bottom end" offset="14px" class="user-menu" scrim>
<VList class="overflow-hidden pt-0 border"> <VList class="overflow-hidden pt-0">
<!-- 👉 User Avatar & Name --> <!-- 👉 User Avatar & Name -->
<div class="user-profile-header px-2 py-4 mb-2"> <div class="user-profile-header px-2 py-4 mb-2">
<div class="d-flex align-center"> <div class="d-flex align-center">