添加鼠标提示的自动关闭功能
parent
0f71a93c5e
commit
06073f3982
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
- 我的列表右键菜单新增列表排序功能,可调整单曲、多选后的歌曲的顺序。注意:多选排序还将会按照选中歌曲时的顺序排序
|
- 我的列表右键菜单新增列表排序功能,可调整单曲、多选后的歌曲的顺序。注意:多选排序还将会按照选中歌曲时的顺序排序
|
||||||
- 添加鼠标指向歌曲封面的提示(对于进度条左边的歌曲封面,你可能不知道的操作->右击在“我的列表”定位当前播放的歌曲)
|
- 添加鼠标指向歌曲封面的提示(对于进度条左边的歌曲封面,你可能不知道的操作->右击在“我的列表”定位当前播放的歌曲)
|
||||||
|
- 添加鼠标提示的自动关闭功能,鼠标长时间(目前是10秒)不动时鼠标提示将会自动关闭
|
||||||
|
|
||||||
### 修复
|
### 修复
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,21 @@ import Tips from './Tips.vue'
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
const TipsConstructor = Vue.extend(Tips)
|
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
|
if (!position) return
|
||||||
let instance = new TipsConstructor().$mount(document.createElement('div'))
|
let instance = new TipsConstructor().$mount(document.createElement('div'))
|
||||||
|
|
||||||
|
@ -17,14 +31,19 @@ export default ({ position, message } = {}) => {
|
||||||
document.body.appendChild(instance.$el)
|
document.body.appendChild(instance.$el)
|
||||||
|
|
||||||
instance.cancel = () => {
|
instance.cancel = () => {
|
||||||
|
instance.$emit('beforeClose', instance)
|
||||||
|
clearAutoCloseTimer(instance)
|
||||||
instance.visible = false
|
instance.visible = false
|
||||||
instance = null
|
instance = null
|
||||||
}
|
}
|
||||||
|
|
||||||
instance.setTips = tips => {
|
instance.setTips = tips => {
|
||||||
|
addAutoCloseTimer(instance, autoCloseTime)
|
||||||
instance.message = tips
|
instance.message = tips
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addAutoCloseTimer(instance, autoCloseTime)
|
||||||
|
|
||||||
return instance
|
return instance
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -17,6 +17,7 @@ export default {
|
||||||
transform: 'translate(0, 0)',
|
transform: 'translate(0, 0)',
|
||||||
cancel: null,
|
cancel: null,
|
||||||
setTips: null,
|
setTips: null,
|
||||||
|
aotoCloseTimer: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
|
@ -19,18 +19,22 @@ const showTips = debounce(event => {
|
||||||
prevTips = msg
|
prevTips = msg
|
||||||
instance = tips({
|
instance = tips({
|
||||||
message: msg,
|
message: msg,
|
||||||
|
autoCloseTime: 10000,
|
||||||
position: {
|
position: {
|
||||||
top: event.y + 12,
|
top: event.y + 12,
|
||||||
left: event.x + 8,
|
left: event.x + 8,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
instance.$on('beforeClose', closeInstance => {
|
||||||
|
if (instance !== closeInstance) return
|
||||||
|
prevTips = null
|
||||||
|
instance = null
|
||||||
|
})
|
||||||
}, 400)
|
}, 400)
|
||||||
|
|
||||||
const hideTips = () => {
|
const hideTips = () => {
|
||||||
if (!instance) return
|
if (!instance) return
|
||||||
instance.cancel()
|
instance.cancel()
|
||||||
prevTips = null
|
|
||||||
instance = null
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const setTips = tips => {
|
const setTips = tips => {
|
||||||
|
@ -39,7 +43,7 @@ const setTips = tips => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateTips = event => {
|
const updateTips = event => {
|
||||||
if (!instance) return
|
if (!instance) return showTips(event)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
let msg = getTips(event.target)
|
let msg = getTips(event.target)
|
||||||
if (!msg || prevTips === msg) return
|
if (!msg || prevTips === msg) return
|
||||||
|
|
Loading…
Reference in New Issue