在vue中添加自定义指令，能够识别dom，通过鼠标hover事件移入当前区域后，显示浮层
- directives自定义提示指令
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);
};
}
}
}
通过监听鼠标移入移出的mouse方法，设置浮层样式与出现时机
2、div显示dom标签v-tooltip文章来源：https://www.toymoban.com/news/detail-512161.html
<div id="bar-echart" tips="共有6个任务执行成功" v-tooltip/>
此时运行后，出现浮层文章来源地址https://www.toymoban.com/news/detail-512161.html
到了这里，关于vue自定义指令添加跟随鼠标光标提示框v-tooltip的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
