mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-23 23:57:22 +08:00
✨ feat: 在应用菜单中添加工具提示功能
This commit is contained in:
@@ -9,19 +9,16 @@
|
||||
</div>
|
||||
<div class="app-menu-list">
|
||||
<div v-for="(item, index) in menus" :key="item.path" class="app-menu-item">
|
||||
<router-link class="app-menu-item-link" :to="item.path">
|
||||
<i
|
||||
class="iconfont app-menu-item-icon"
|
||||
:style="iconStyle(index)"
|
||||
:class="item.meta.icon"
|
||||
></i>
|
||||
<span
|
||||
v-if="isText"
|
||||
class="app-menu-item-text ml-3"
|
||||
:class="isChecked(index) ? 'text-green-500' : ''"
|
||||
>{{ item.meta.title }}</span
|
||||
>
|
||||
</router-link>
|
||||
<n-tooltip :delay="200" :disabled="isText" placement="bottom">
|
||||
<template #trigger>
|
||||
<router-link class="app-menu-item-link" :to="item.path">
|
||||
<i class="iconfont app-menu-item-icon" :style="iconStyle(index)" :class="item.meta.icon"></i>
|
||||
<span v-if="isText" class="app-menu-item-text ml-3" :class="isChecked(index) ? 'text-green-500' : ''">{{
|
||||
item.meta.title }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
<div v-if="!isText">{{ item.meta.title }}</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,6 +80,7 @@ const isText = ref(false);
|
||||
|
||||
.app-menu-expanded {
|
||||
@apply w-[160px];
|
||||
|
||||
.app-menu-item {
|
||||
@apply hover:bg-gray-100 dark:hover:bg-gray-800 rounded mr-4;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user