mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-18 03:17:29 +08:00
✨ feat: 在应用菜单中添加工具提示功能
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user