Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zacharyzlj
Yz Music
提交
04dadadf
Y
Yz Music
项目概览
zacharyzlj
/
Yz Music
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Y
Yz Music
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
04dadadf
编写于
2月 23, 2021
作者:
Z
Zachary
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: search lyric add copying func
* add new components
上级
bd7c3961
变更
6
显示空白变更内容
内联
并排
Showing
6 changed file
with
318 addition
and
222 deletion
+318
-222
src/assets/css/fakeqqmusic.scss
src/assets/css/fakeqqmusic.scss
+128
-1
src/common/utils.js
src/common/utils.js
+9
-0
src/components/common/BlackTip.vue
src/components/common/BlackTip.vue
+25
-0
src/components/common/ShowLyrics.vue
src/components/common/ShowLyrics.vue
+147
-0
src/views/musicLibrary/SearchResultDetail.vue
src/views/musicLibrary/SearchResultDetail.vue
+3
-198
src/views/musicLibrary/SongDetail.vue
src/views/musicLibrary/SongDetail.vue
+6
-23
未找到文件。
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录