在播放列表中,添加定位按钮,方便定位当前正在播放的音乐

This commit is contained in:
徐旭飞 2024-03-18 16:01:17 +08:00
parent d92e34949c
commit 380e80478f
2 changed files with 46 additions and 0 deletions

View File

@ -220,6 +220,9 @@
<!-- 0 0 24 24-->
<path d="M5.12,14L7.5,7.67L9.87,14M6.5,5L1,19H3.25L4.37,16H10.62L11.75,19H14L8.5,5H6.5M18,7L13,12.07L14.41,13.5L17,10.9V17H19V10.9L21.59,13.5L23,12.07L18,7Z" />
</g>
<g id="icon-music-location" fill="currentColor">
<path d="M87.424 469.312A426.816 426.816 0 0 1 469.312 87.424V0h85.376v87.424a426.816 426.816 0 0 1 381.888 381.888H1024v85.376h-87.424a426.816 426.816 0 0 1-381.888 381.888V1024h-85.376v-87.424A426.816 426.816 0 0 1 87.424 554.688H0v-85.376h87.424z m424.576 384a341.312 341.312 0 1 0 0-682.624 341.312 341.312 0 0 0 0 682.624z m0-170.624a170.688 170.688 0 1 0 0-341.376 170.688 170.688 0 0 0 0 341.376z"></path>
</g>
</defs>
</svg>
</template>

View File

@ -82,6 +82,15 @@
<div class="list-item-cell" style="flex: 0 0 10%;"><span class="no-select">{{ item.interval || '--/--' }}</span></div>
</div>
</base-virtualized-list>
<button
v-if="playerInfo.isPlayList && playerInfo.playIndex >= 0"
:class="$style.location"
@click="handleLocation"
>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#icon-music-location" />
</svg>
</button>
</div>
<div v-show="!list.length" :class="$style.noItem">
<p v-text="$t('no_item')" />
@ -287,6 +296,9 @@ export default {
const scrollToTop = () => {
listRef.value.scrollTo(0, true)
}
const handleLocation = () => {
listRef.value.scrollToIndex(playerInfo.value.playIndex, 0, true)
}
return {
listItemHeight,
@ -338,6 +350,8 @@ export default {
handleRestoreScroll,
actionButtonsVisible,
handleLocation,
}
},
}
@ -396,6 +410,7 @@ export default {
display: flex;
flex-flow: column nowrap;
flex: auto;
position: relative;
}
.noItem {
@ -412,4 +427,32 @@ export default {
}
}
.location {
all: unset;
position: absolute;
right: 48px;
bottom: 48px;
width: 32px;
height: 32px;
color: var(--color-button-font);
cursor: pointer;
svg {
transition: opacity @transition-fast;
opacity: .6;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}
&:hover {
svg {
opacity: .9;
}
}
&:active {
svg {
opacity: 1;
}
}
}
</style>