项目中有一个需求，需要鼠标划入后显示相关信息，信息要跟随鼠标指针显示
思路
- 将显示内容放到一个浮层容器中，内容通过属性值的方式传递，或者使用指令的binding参数传递
- 监听鼠标移入事件，当鼠标移入后先将浮层append到body中
- 监听鼠标移出事件，当鼠标移出后销毁浮层
- 鼠标移动过程中，根据鼠标位置，根据鼠标的
e.clientY,e.clientX动态修改浮层的位置值达到效果
代码
采用局部指令的方式进行
......
methods: {
....
},
directives: {
// 自定义提示指令
tooltip: {
componentUpdated: function(el, binding) {
// 鼠标移入时，将浮沉元素插入到body中
el.onmouseenter = function(e) {
// 创建浮层元素并设置样式
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)
// 浮层中的文字 通过属性值传递动态的显示文案
document.getElementById('vc-tooltip').innerHTML = el.getAttribute('tips')
}
// 鼠标移动时，动态修改浮沉的位置属性
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个任务执行成功" v-tooltip>
效果
tips
