項目中有一個需求昼蛀，需要鼠標劃入后顯示相關信息弯院，信息要跟隨鼠標指針顯示
思路
- 將顯示內容放到一個浮層容器中翎卓，內容通過屬性值的方式傳遞贞瞒，或者使用指令的binding參數傳遞
- 監(jiān)聽鼠標移入事件币他，當鼠標移入后先將浮層append到body中
- 監(jiān)聽鼠標移出事件，當鼠標移出后銷毀浮層
- 鼠標移動過程中憔狞，根據鼠標位置，根據鼠標的
e.clientY,e.clientX動態(tài)修改浮層的位置值達到效果
代碼
采用局部指令的方式進行
......
methods: {
....
},
directives: {
// 自定義提示指令
tooltip: {
componentUpdated: function(el, binding) {
// 鼠標移入時彰阴，將浮沉元素插入到body中
el.onmouseenter = function(e) {
// 創(chuàng)建浮層元素并設置樣式
const vcTooltipDom = document.createElement('div')
vcTooltipDom.style.cssText = `
overflow: auto;
position:absolute;
background: #fff;;
color:#666;
box-shadow: rgba(168, 168, 168, 0.295) 1px 2px 10px;
border-radius:5px;
padding:10px;
display:inline-block;
font-size:14px;
z-index:2
`
// 設置id方便尋找
vcTooltipDom.setAttribute('id', 'vc-tooltip')
// 將浮層插入到body中
document.body.appendChild(vcTooltipDom)
// 浮層中的文字 通過屬性值傳遞動態(tài)的顯示文案
document.getElementById('vc-tooltip').innerHTML = el.getAttribute('tips')
}
// 鼠標移動時瘾敢，動態(tài)修改浮沉的位置屬性
el.onmousemove = function(e) {
const vcTooltipDom = document.getElementById('vc-tooltip')
vcTooltipDom.style.top = e.clientY + 15 + 'px'
vcTooltipDom.style.left = e.clientX + 15 + 'px'
}
// 鼠標移出時將浮層元素銷毀
el.onmouseleave = function() {
// 找到浮層元素并移出
const vcTooltipDom = document.getElementById('vc-tooltip')
vcTooltipDom && document.body.removeChild(vcTooltipDom)
}
}
}
}
......
使用
<div :tips="共有6個任務執(zhí)行成功" v-tooltip>
效果
tips
