fix: 分享功能提取公共组件，优化交互提示

sl1673495 · Aug 21, 2019 · f64f0e7 · f64f0e7
1 parent 2265813
commit f64f0e7
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 24 deletions.
diff --git a/src/components/mini-player.vue b/src/components/mini-player.vue
@@ -74,23 +74,11 @@
     </div>
 
     <div class="mode">
-      <!-- 分享 -->
-      <el-popover
-        placement="top"
-        trigger="hover"
-        width="180"
-      >
-        <p>点击后生成链接到剪贴板</p>
-        <Icon
-          :data-clipboard-text="shareUrl"
-          :size="20"
-          class="mode-item"
-          ref="shareIcon"
-          slot="reference"
-          type="share"
-          v-show="hasCurrentSong"
-        />
-      </el-popover>
+      <Share
+        :shareUrl="shareUrl"
+        class="mode-item"
+        v-show="hasCurrentSong"
+      />
 
       <!-- 模式 -->
       <el-popover
@@ -163,21 +151,20 @@ import {
   mapActions
 } from "@/store/helper/music"
 import Storage from "good-storage"
-import Clipboard from "clipboard"
+import Share from "@/components/share"
 import { VOLUME_KEY, playModeMap, isDef } from "@/utils"
 
 const DEFAULT_VOLUME = 0.75
 export default {
   data() {
     return {
-      songReady: false,
       isPlayErrorPromptShow: false,
+      songReady: false,
       volume: Storage.get(VOLUME_KEY, DEFAULT_VOLUME)
     }
   },
   mounted() {
     this.audio.volume = this.volume
-    this.initShareIcon()
   },
   methods: {
     togglePlaying() {
@@ -249,9 +236,7 @@ export default {
     goGitHub() {
       window.open("https://github.com/sl1673495/vue-netease-music")
     },
-    initShareIcon() {
-      new Clipboard(this.$refs.shareIcon.$el)
-    },
+
     ...mapMutations([
       "setCurrentTime",
       "setPlayingState",
@@ -330,7 +315,8 @@ export default {
       "isPlayerShow"
     ]),
     ...mapGetters(["prevSong", "nextSong"])
-  }
+  },
+  components: { Share }
 }
 </script>
 

diff --git a/src/components/share.vue b/src/components/share.vue
@@ -0,0 +1,48 @@
+<template>
+  <!-- 分享 -->
+  <el-popover
+    :content="shareText"
+    @after-leave="onSharePromptHide"
+    placement="top"
+    trigger="hover"
+    width="180"
+  >
+    <Icon
+      :data-clipboard-text="shareUrl"
+      :size="20"
+      @click="onSharePromptClick"
+      class="mode-item"
+      ref="shareIcon"
+      slot="reference"
+      type="share"
+    />
+  </el-popover>
+</template>
+
+<script type="text/ecmascript-6">
+import Clipboard from "clipboard"
+
+const defaultShareText = "点击生成链接到剪贴板"
+export default {
+  props: ["shareUrl"],
+  mounted() {
+    this.initShareIcon()
+  },
+  data() {
+    return {
+      shareText: defaultShareText
+    }
+  },
+  methods: {
+    initShareIcon() {
+      new Clipboard(this.$refs.shareIcon.$el)
+    },
+    onSharePromptClick() {
+      this.shareText = "生成链接成功！"
+    },
+    onSharePromptHide() {
+      this.shareText = defaultShareText
+    }
+  }
+}
+</script>