diff --git a/.gitignore b/.gitignore index 843870d..6f6eca6 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ dist dist-ssr *.local + # Editor directories and files .vscode/* !.vscode/extensions.json @@ -35,6 +36,7 @@ target *.iml out gen +*/upload */.vscode .vscode #忽略所有.svn目录 diff --git a/music-qianduan/src/views/MusicDetail.vue b/music-qianduan/src/views/MusicDetail.vue index e31d89d..dbb4dc1 100644 --- a/music-qianduan/src/views/MusicDetail.vue +++ b/music-qianduan/src/views/MusicDetail.vue @@ -106,7 +106,10 @@

歌词

-
{{ music.lyric }}
+
{{ displayedLyric }}
+
+ {{ isLyricExpanded ? '收起歌词' : '查看更多歌词' }} +
@@ -226,6 +229,26 @@ const replyingTo = ref(null) const expandedComments = ref([]) let commentSubscription = null; +const isLyricExpanded = ref(false) +const LYRIC_PREVIEW_LINES = 10 + +const isLyricTooLong = computed(() => { + if (!music.value || !music.value.lyric) return false + return music.value.lyric.split('\n').length > LYRIC_PREVIEW_LINES +}) + +const displayedLyric = computed(() => { + if (!music.value || !music.value.lyric) return '' + if (isLyricExpanded.value || !isLyricTooLong.value) { + return music.value.lyric + } + return music.value.lyric.split('\n').slice(0, LYRIC_PREVIEW_LINES).join('\n') +}) + +const toggleLyricExpansion = () => { + isLyricExpanded.value = !isLyricExpanded.value +} + // 计算属性 const isPlaying = computed(() => { return playerStore.getCurrentMusic?.id === music.value?.id && playerStore.getIsPlaying @@ -517,6 +540,17 @@ onUnmounted(() => {