添加鼠标提示的自动关闭功能

publish/changeLog.md

@@ -2,6 +2,7 @@
 
 - 我的列表右键菜单新增列表排序功能，可调整单曲、多选后的歌曲的顺序。注意：多选排序还将会按照选中歌曲时的顺序排序
 - 添加鼠标指向歌曲封面的提示（对于进度条左边的歌曲封面，你可能不知道的操作->右击在“我的列表”定位当前播放的歌曲）
+- 添加鼠标提示的自动关闭功能，鼠标长时间（目前是10秒）不动时鼠标提示将会自动关闭
 
 ### 修复
 

src/renderer/plugins/Tips/Tips.js

@@ -2,7 +2,21 @@ import Tips from './Tips.vue'
 import Vue from 'vue'
 
 const TipsConstructor = Vue.extend(Tips)
-export default ({ position, message } = {}) => {
+
+const addAutoCloseTimer = (instance, time) => {
+  if (!time) return
+  if (instance.autoCloseTimer) clearTimeout(instance.autoCloseTimer)
+  instance.autoCloseTimer = setTimeout(() => {
+    instance.cancel()
+  }, time)
+}
+const clearAutoCloseTimer = instance => {
+  if (!instance.autoCloseTimer) return
+  clearTimeout(instance.autoCloseTimer)
+  instance.autoCloseTimer = null
+}
+
+export default ({ position, message, autoCloseTime } = {}) => {
   if (!position) return
   let instance = new TipsConstructor().$mount(document.createElement('div'))
 
@@ -17,14 +31,19 @@ export default ({ position, message } = {}) => {
   document.body.appendChild(instance.$el)
 
   instance.cancel = () => {
+    instance.$emit('beforeClose', instance)
+    clearAutoCloseTimer(instance)
     instance.visible = false
     instance = null
   }
 
   instance.setTips = tips => {
+    addAutoCloseTimer(instance, autoCloseTime)
     instance.message = tips
   }
 
+  addAutoCloseTimer(instance, autoCloseTime)
+
   return instance
 }
 

src/renderer/plugins/Tips/Tips.vue

@@ -17,6 +17,7 @@ export default {
       transform: 'translate(0, 0)',
       cancel: null,
       setTips: null,
+      aotoCloseTimer: null,
     }
   },
   watch: {

src/renderer/plugins/Tips/index.js

@@ -19,18 +19,22 @@ const showTips = debounce(event => {
   prevTips = msg
   instance = tips({
     message: msg,
+    autoCloseTime: 10000,
     position: {
       top: event.y + 12,
       left: event.x + 8,
     },
   })
+  instance.$on('beforeClose', closeInstance => {
+    if (instance !== closeInstance) return
+    prevTips = null
+    instance = null
+  })
 }, 400)
 
 const hideTips = () => {
   if (!instance) return
   instance.cancel()
-  prevTips = null
-  instance = null
 }
 
 const setTips = tips => {
@@ -39,7 +43,7 @@ const setTips = tips => {
 }
 
 const updateTips = event => {
-  if (!instance) return
+  if (!instance) return showTips(event)
   setTimeout(() => {
     let msg = getTips(event.target)
     if (!msg || prevTips === msg) return