Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 04dadadf 编写于 作者: Z Zachary
浏览文件
操作

feat: search lyric add copying func 

* add new components
上级 bd7c3961
隐藏空白更改
内联 并排
Showing with 318 addition and 222 deletion
src/assets/css/fakeqqmusic.scss
浏览文件 @ 04dadadf
......@@ -12,7 +12,7 @@ $black: #000;
h4,
h5,
h6,
dd
dd,
p {
margin: 0;
padding: 0;
......@@ -96,6 +96,17 @@ $black: #000;
height: 16px;
background-position: -120px 0;
}
.mod_btn__icon_new {
width: 16px;
height: 16px;
background-position: 0 -180px;
}
.mod_btn__icon_copy {
width: 16px;
height: 14px;
background-position: -40px -100px;
vertical-align: -2px;
}
.mod_btn__icon_add,
.mod_btn__icon_batch,
.mod_btn__icon_comment,
......@@ -130,6 +141,28 @@ $black: #000;
background-repeat: no-repeat;
}
.mod_tab {
position: relative;
zoom: 1;
border-bottom: 1px solid #f7f7f7;
margin-bottom: 30px;
}
.mod_tab,
.mod_tab__item {
height: 56px;
line-height: 56px;
}
.mod_tab__current {
color: $green;
}
.mod_tab__item {
position: relative;
float: left;
font-size: 16px;
overflow: hidden;
margin-right: 55px;
}
.list_menu__item {
display: inline-block;
margin-right: 10px;
......@@ -936,6 +969,100 @@ $black: #000;
}
}
.mod_playlist_text {
zoom: 1;
font-size: 14px;
.playlist__header {
height: 50px;
line-height: 50px;
background-color: #fbfbfd;
color: #999;
}
.playlist__header_name {
width: 57%;
}
.playlist__author,
.playlist__header_author,
.playlist__header_name,
.playlist__header_number,
.playlist__number {
float: left;
padding-left: 20px;
}
.playlist__author,
.playlist__number,
.playlist__other,
.playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.playlist__author,
.playlist__count,
.playlist__number,
.playlist__title {
float: left;
height: 70px;
}
.playlist__author,
.playlist__number,
.playlist__other,
.playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.playlist__author,
.playlist__header_author {
width: 30%;
}
.playlist__header_other,
.playlist__other {
width: 7.5%;
float: right;
padding-right: 20px;
text-align: right;
}
.playlist__item {
position: relative;
height: 70px;
line-height: 70px;
zoom: 1;
overflow: hidden;
clear: both;
font-size: 0;
}
.playlist__cover {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
margin-top: 10px;
padding-left: 20px;
}
.playlist__pic {
object-fit: cover;
height: 100%;
display: block;
width: 100%;
min-height: 50px;
}
.playlist__title {
width: 52.66667%;
font-weight: 400;
text-indent: 15px;
overflow: hidden;
}
.playlist__title_txt {
float: left;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
}
.mod_playlist .playlist__cover:hover .playlist__pic {
transform: scale(1.07) translateZ(0);
transition: transform 0.75s cubic-bezier(0, 1, 0.75, 1);
......
src/common/utils.js
浏览文件 @ 04dadadf
......@@ -5,3 +5,12 @@ export * from "./routerHelper";
export function isDef(v) {
return v !== undefined && v !== null;
}
export function copyText(v) {
let oInput = document.createElement("input");
oInput.value = v;
document.body.appendChild(oInput);
oInput.select(); // 选择对象;
console.log(oInput.value);
document.execCommand("Copy"); // 执行浏览器复制命令
}
src/components/common/BlackTip.vue 0 → 100644
浏览文件 @ 04dadadf
<template>
<div
class="mod_popup_tips"
id="popup"
style="z-index: 2147483647; left: 646px; top: 326px"
:style="{ display: ifShow ? '' : 'none' }"
>
<i class="popup_tips__icon"></i>
<h2 class="popup_tips__tit">{{ tip }}</h2>
</div>
</template>
<script>
export default {
props: {
ifShow: {
default: false,
},
tip: {
type: String,
default: "",
},
},
};
</script>
src/components/common/ShowLyrics.vue 0 → 100644
浏览文件 @ 04dadadf
<template>
<div
class="js_search_tab_cont search_tab_cont"
id="lyric_box"
style="display: block"
>
<div class="mod_lyric_list">
<ul class="lyric_list__list">
<li class="lyric_list__item" v-for="lyric in lyrics" :key="lyric.id">
<h3 class="lyric_list__tit">
<a title="">{{ lyric.name }}</a>
－
<a class="singer_name" :title="lyric.artistsText">{{
lyric.artistsText
}}</a>
</h3>
<h4 class="lyric_list__album">
<a class="album_name" :title="lyric.albumName">{{
lyric.albumName
}}</a>
</h4>
<div class="lyric_list__cont" :class="lyric.class">
<div v-html="processLyric(lyric.lyrics)"></div>
</div>
<div class="lyric_list__toolbar">
<button class="mod_btn js_clip" @click="moreLyric(lyric)">
<i class="mod_btn__icon_more"></i>
{{ lyric.class ? "收起" : "展开" }}
</button>
<button
class="mod_btn js_lyric_copy"
:copy-content="lyric.lyrics"
@click="copyLyric(lyric.lyrics)"
>
<i class="mod_btn__icon_copy"></i>复制歌词
</button>
</div>
</li>
</ul>
</div>
<black-tip :ifShow="ifShowTip" :tip="'复制成功'" />
</div>
</template>
<script>
import BlackTip from "components/common/BlackTip";
import { copyText } from "common/utils";
export default {
data() {
return {
ifShowTip: false,
};
},
props: {
lyrics: {
type: Array,
default: [],
},
},
methods: {
moreLyric(l) {
l.class = l.class ? "" : "lyric_list__cont--max";
},
processLyric(lyrics) {
return lyrics.join("<br/>");
},
copyLyric(lyrics) {
let lyricText = lyrics.join(" ");
copyText(lyricText);
this.showTip("复制成功");
},
showTip(tip) {
this.tip = tip;
this.ifShowTip = true;
if (this.tipTimer) clearTimeout(this.tipTimer);
setTimeout(() => {
this.ifShowTip = false;
}, 1000);
},
},
components: {
BlackTip,
},
};
</script>
<style scoped>
ul {
margin: 0;
padding: 0;
}
.mod_btn {
border: 1px solid #c9c9c9;
color: #000;
}
.mod_btn,
.mod_btn_green {
background-color: #fff;
border-radius: 2px;
font-size: 14px;
margin-right: 6px;
padding: 0 23px;
height: 38px;
line-height: 38px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
}
.mod_btn__icon_new {
width: 16px;
height: 16px;
background-position: 0 -180px;
}
.mod_btn__icon_copy {
width: 16px;
height: 14px;
background-position: -40px -100px;
vertical-align: -2px;
}
.mod_lyric_list {
margin-top: -20px;
}
.lyric_list__item {
position: relative;
font-size: 14px;
line-height: 28px;
padding: 20px 0 20px;
border-bottom: 1px solid #f7f7f7;
}
.lyric_list__album,
.lyric_list__tit {
font-weight: 400;
}
.lyric_list__cont {
height: 196px;
overflow: hidden;
color: #999;
}
.lyric_list__cont--max {
height: initial;
}
.lyric_list__toolbar {
margin-top: 10px;
}
</style>
src/views/musicLibrary/SearchResultDetail.vue
浏览文件 @ 04dadadf
......@@ -75,47 +75,7 @@
</div>
</div>
<!-- lyric -->
<div
class="js_search_tab_cont search_tab_cont"
id="lyric_box"
style="display: block"
v-if="selectedType == 1006"
>
<div class="mod_lyric_list">
<ul class="lyric_list__list">
<li
class="lyric_list__item"
v-for="lyric in lyrics"
:key="lyric.id"
>
<h3 class="lyric_list__tit">
<a title="">{{ lyric.name }}</a>
－
<a class="singer_name" :title="lyric.artistsText">{{
lyric.artistsText
}}</a>
</h3>
<h4 class="lyric_list__album">
<a class="album_name" :title="lyric.albumName">{{
lyric.albumName
}}</a>
</h4>
<div class="lyric_list__cont" :class="lyric.class">
<div v-html="processLyric(lyric.lyrics)"></div>
</div>
<div class="lyric_list__toolbar">
<button class="mod_btn js_clip" @click="moreLyric(lyric)">
<i class="mod_btn__icon_more"></i>
{{ lyric.class ? "收起" : "展开" }}
</button>
<button class="mod_btn js_lyric_copy">
<i class="mod_btn__icon_copy"></i>复制歌词
</button>
</div>
</li>
</ul>
</div>
</div>
<show-lyrics :lyrics="lyrics" v-if="selectedType == 1006" />
</div>
</div>
</div>
......@@ -126,7 +86,7 @@ import ShowSongs from "components/common/ShowSongs";
import ShowAlbums from "components/common/ShowAlbums";
import ShowMvs from "components/common/ShowMvs";
import ShowPlaylist from "components/common/ShowPlaylist";
import DetailSonglist from "components/common/DetailSonglist";
import ShowLyrics from "components/common/ShowLyrics";
import ModListMenu from "components/common/ModListMenu";
import { getSearchResult } from "api";
import {
......@@ -165,13 +125,6 @@ export default {
changeSelectedType(id) {
if (id != this.selectedType) this.selectedType = id;
},
processLyric(lyrics) {
return lyrics.join("<br/>");
},
moreLyric(l) {
console.log("jfkalj");
l.class = l.class ? "" : "lyric_list__cont--max";
},
search() {
getSearchResult({ keywords: this.keyword, type: 1 }).then((res) => {
this.songs = createSongs(res.data.result.songs);
......@@ -201,7 +154,7 @@ export default {
ShowAlbums,
ShowMvs,
ShowPlaylist,
DetailSonglist,
ShowLyrics,
ModListMenu,
},
};
......@@ -285,104 +238,6 @@ button {
.mod_songlist {
padding-bottom: 40px;
}
.mod_playlist_text .playlist__header {
height: 50px;
line-height: 50px;
background-color: #fbfbfd;
color: #999;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author,
.mod_playlist_text .playlist__header_name,
.mod_playlist_text .playlist__header_number,
.mod_playlist_text .playlist__number {
float: left;
padding-left: 20px;
}
.mod_playlist_text .playlist__header_name {
width: 57%;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author {
width: 30%;
}
.mod_playlist_text .playlist__header_other,
.mod_playlist_text .playlist__other {
width: 7.5%;
}
.mod_playlist_text .playlist__header_other,
.mod_playlist_text .playlist__other {
float: right;
padding-right: 20px;
text-align: right;
}
.mod_playlist_text .playlist__item {
position: relative;
height: 70px;
line-height: 70px;
zoom: 1;
overflow: hidden;
clear: both;
font-size: 0;
}
.mod_playlist_text .playlist__cover {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
margin-top: 10px;
padding-left: 20px;
}
.mod_playlist_text .playlist__pic {
height: 100%;
object-fit: cover;
}
.mod_playlist_text .playlist__pic {
display: block;
width: 100%;
min-height: 50px;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__other,
.mod_playlist_text .playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.mod_playlist_text .playlist__title {
width: 52.66667%;
font-weight: 400;
text-indent: 15px;
overflow: hidden;
}
.mod_playlist_text .playlist__title_txt {
float: left;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__count,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__title {
float: left;
height: 70px;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author {
width: 30%;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__other,
.mod_playlist_text .playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.singer_list__item {
position: relative;
......@@ -461,58 +316,8 @@ button {
margin-right: 20px;
}
.mod_lyric_list {
margin-top: -20px;
}
.lyric_list__item {
position: relative;
font-size: 14px;
line-height: 28px;
padding: 20px 0 20px;
border-bottom: 1px solid #f7f7f7;
}
.lyric_list__album,
.lyric_list__tit {
font-weight: 400;
}
.lyric_list__cont {
height: 196px;
overflow: hidden;
color: #999;
}
.lyric_list__cont--max {
height: initial;
}
.lyric_list__toolbar {
margin-top: 10px;
}
.mod_btn {
border: 1px solid #c9c9c9;
color: #000;
}
.mod_btn,
.mod_btn_green {
background-color: #fff;
border-radius: 2px;
font-size: 14px;
margin-right: 6px;
padding: 0 23px;
height: 38px;
line-height: 38px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
}
.mod_btn__icon_new {
width: 16px;
height: 16px;
background-position: 0 -180px;
}
.mod_btn__icon_copy {
width: 16px;
height: 14px;
background-position: -40px -100px;
vertical-align: -2px;
}
</style>
src/views/musicLibrary/SongDetail.vue
浏览文件 @ 04dadadf
......@@ -6,13 +6,11 @@
<div class="detail_layout__main">
<!--歌词 start-->
<div class="mod_lyric">
<input id="copy_content" style="display: none" />
<div class="lyric__hd">
<h2 class="lyric__tit">歌词</h2>
<a
class="btn_copy sprite"
id="copy_link"
href="javascript:;"
title="复制歌词"
@click="copyLyric"
><i class="icon_txt">复制</i></a
......@@ -26,10 +24,7 @@
<div class="lyric__cont_box" id="lrc_content">
<p v-for="(item, idx) in lyric" :key="idx">{{ item }}</p>
</div>
<a
href="javascript:;"
class="c_tx_highlight js_open_lyric"
@click="toggleLyric"
<a class="c_tx_highlight js_open_lyric" @click="toggleLyric"
>[{{ isShowAllLyric ? "收起" : "展开" }}]</a
>
</div>
......@@ -44,8 +39,6 @@
<ul class="playlist__list" v-if="simiSongs">
<li
class="playlist__item"
onmouseover="this.className=(this.className+' playlist__item--hover')"
onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
v-for="simiSong in simiSongs"
:key="simiSong.id"
>
......@@ -105,21 +98,14 @@
</div>
</div>
</div>
<div
class="mod_popup_tips"
id="popup"
style="z-index: 2147483647; left: 646px; top: 326px"
:style="{ display: ifShowTip ? '' : 'none' }"
>
<i class="popup_tips__icon"></i>
<h2 class="popup_tips__tit">{{ tip }}</h2>
</div>
<black-tip :ifShow="ifShowTip" :tip="tip" />
</template>
<script>
import DetailInfoCard from "components/common/DetailInfoCard";
import BlackTip from "components/common/BlackTip";
import { getSongDetail, getSongLiyric, getSimiSong, getMvDetail } from "api";
import { createSong, formatDate, playTheSong } from "common/utils";
import { createSong, formatDate, playTheSong, copyText } from "common/utils";
export default {
data() {
......@@ -198,11 +184,7 @@ export default {
copyLyric() {
if (this.lyric) {
let lyricText = this.lyric.join(" ");
let input = document.getElementById("copy_content");
input.value = lyricText;
input.select();
document.execCommand("copy");
copyText(lyricText);
this.showTip("复制成功");
}
},
......@@ -229,6 +211,7 @@ export default {
},
components: {
DetailInfoCard,
BlackTip,
},
};
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或