feat: 在应用菜单中添加工具提示功能

This commit is contained in:
alger
2025-05-15 21:16:48 +08:00
parent a8010c8ca7
commit 5084da333f
+11 -13
View File
@@ -9,19 +9,16 @@
</div> </div>
<div class="app-menu-list"> <div class="app-menu-list">
<div v-for="(item, index) in menus" :key="item.path" class="app-menu-item"> <div v-for="(item, index) in menus" :key="item.path" class="app-menu-item">
<router-link class="app-menu-item-link" :to="item.path"> <n-tooltip :delay="200" :disabled="isText" placement="bottom">
<i <template #trigger>
class="iconfont app-menu-item-icon" <router-link class="app-menu-item-link" :to="item.path">
:style="iconStyle(index)" <i class="iconfont app-menu-item-icon" :style="iconStyle(index)" :class="item.meta.icon"></i>
:class="item.meta.icon" <span v-if="isText" class="app-menu-item-text ml-3" :class="isChecked(index) ? 'text-green-500' : ''">{{
></i> item.meta.title }}</span>
<span </router-link>
v-if="isText" </template>
class="app-menu-item-text ml-3" <div v-if="!isText">{{ item.meta.title }}</div>
:class="isChecked(index) ? 'text-green-500' : ''" </n-tooltip>
>{{ item.meta.title }}</span
>
</router-link>
</div> </div>
</div> </div>
</div> </div>
@@ -83,6 +80,7 @@ const isText = ref(false);
.app-menu-expanded { .app-menu-expanded {
@apply w-[160px]; @apply w-[160px];
.app-menu-item { .app-menu-item {
@apply hover:bg-gray-100 dark:hover:bg-gray-800 rounded mr-4; @apply hover:bg-gray-100 dark:hover:bg-gray-800 rounded mr-4;
} }