ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加列表激活图标

Browse Source
This commit is contained in:
lyswhut
2022-11-14 20:22:35 +08:00
parent e79f8b357c
commit ab37817d26
7 changed files with 114 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/List/MusicList/index.vue
+38 -2
View File
@@ -31,7 +31,14 @@
class="list-item" :class="[{ [$style.active]: playerInfo.isPlayList && playerInfo.playIndex === index }, { selected: selectedIndex == index || rightClickSelectedIndex == index }, { active: selectedList.includes(item) }, { disabled: !assertApiSupport(item.source) }]"
@click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)"
>
<div class="list-item-cell no-select num" style="flex: 0 0 5%;" @click.stop>{{ index + 1 }}</div>
<div class="list-item-cell no-select" :class="$style.num" style="flex: 0 0 5%;">
<div v-if="playerInfo.isPlayList && playerInfo.playIndex === index" :class="$style.playIcon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="50%" viewBox="0 0 512 512" space="preserve">
<use xlink:href="#icon-play-outline" />
</svg>
</div>
<div v-else class="num">{{ index + 1 }}</div>
</div>
<div class="list-item-cell auto name" :aria-label="item.name">
<span class="select name">{{ item.name }}</span>
<span v-if="isShowSource" class="no-select label-source">{{ item.source }}</span>
@@ -54,7 +61,16 @@
:class="[{ [$style.active]: playerInfo.isPlayList && playerInfo.playIndex === index }, { selected: selectedIndex == index || rightClickSelectedIndex == index }, { active: selectedList.includes(item) }, { disabled: !assertApiSupport(item.source) }]"
@click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)"
>
<div class="list-item-cell no-select num" style="flex: 0 0 5%;" @click.stop>{{ index + 1 }}</div>
<div class="list-item-cell no-select" :class="$style.num" style="flex: 0 0 5%;">
<transition name="play-active">
<div v-if="playerInfo.isPlayList && playerInfo.playIndex === index" :class="$style.playIcon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="50%" viewBox="0 0 512 512" space="preserve">
<use xlink:href="#icon-play-outline" />
</svg>
</div>
<div v-else class="num">{{ index + 1 }}</div>
</transition>
</div>
<div class="list-item-cell auto name">
<span class="select name" :aria-label="item.name">{{ item.name }}</span>
<span v-if="isShowSource" class="no-select label-source">{{ item.source }}</span>
@@ -350,6 +366,26 @@ export default {
}
}
}
.num {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.playIcon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-button-font);
opacity: .7;
}
.content {
min-height: 0;
font-size: 14px;