From 04dadadf94d9eaa7e4319bfa464ed8e70b66d6c1 Mon Sep 17 00:00:00 2001
From: Zachary <zlj19971222@outlook.com>
Date: Tue, 23 Feb 2021 03:24:40 +0800
Subject: [PATCH] feat: search lyric add copying func

* add new components
---
 src/assets/css/fakeqqmusic.scss               | 129 ++++++++++-
 src/common/utils.js                           |   9 +
 src/components/common/BlackTip.vue            |  25 +++
 src/components/common/ShowLyrics.vue          | 147 +++++++++++++
 src/views/musicLibrary/SearchResultDetail.vue | 201 +-----------------
 src/views/musicLibrary/SongDetail.vue         |  29 +--
 6 files changed, 318 insertions(+), 222 deletions(-)
 create mode 100644 src/components/common/BlackTip.vue
 create mode 100644 src/components/common/ShowLyrics.vue

diff --git a/src/assets/css/fakeqqmusic.scss b/src/assets/css/fakeqqmusic.scss
index f6c1e71..777f8c6 100644
--- a/src/assets/css/fakeqqmusic.scss
+++ b/src/assets/css/fakeqqmusic.scss
@@ -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);
diff --git a/src/common/utils.js b/src/common/utils.js
index 2d70697..af69d85 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -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"); // 执行浏览器复制命令
+}
diff --git a/src/components/common/BlackTip.vue b/src/components/common/BlackTip.vue
new file mode 100644
index 0000000..da4972b
--- /dev/null
+++ b/src/components/common/BlackTip.vue
@@ -0,0 +1,25 @@
+<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>
diff --git a/src/components/common/ShowLyrics.vue b/src/components/common/ShowLyrics.vue
new file mode 100644
index 0000000..c37e06c
--- /dev/null
+++ b/src/components/common/ShowLyrics.vue
@@ -0,0 +1,147 @@
+<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>
diff --git a/src/views/musicLibrary/SearchResultDetail.vue b/src/views/musicLibrary/SearchResultDetail.vue
index 57c2772..749400f 100644
--- a/src/views/musicLibrary/SearchResultDetail.vue
+++ b/src/views/musicLibrary/SearchResultDetail.vue
@@ -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>
diff --git a/src/views/musicLibrary/SongDetail.vue b/src/views/musicLibrary/SongDetail.vue
index 417cde6..ac388eb 100644
--- a/src/views/musicLibrary/SongDetail.vue
+++ b/src/views/musicLibrary/SongDetail.vue
@@ -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>
-- 
GitLab