vue自定义指令两种方式（vue自定义指令添加跟随鼠标光标提示框v-tooltip方式）
导读：自定义指令添加跟随鼠标光标提示框v-tooltip 在vue中添加自定义指令，能够识别dom，通过鼠标hover事件移入当前区域后，显示浮层...
自定义指令添加跟随鼠标光标提示框v-tooltip
在vue中添加自定义指令 ，能够识别dom ，通过鼠标hover事件移入当前区域后 ，显示浮层
1 、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
<div id="bar-echart" tips="共有6个任务执行成功" v-tooltip/>
此时运行后 ，出现浮层
vue自定义指令实现tooltip功能
1 、需求
元素展示提示框跟随鼠标移动
2 、思路
vue的自定义指令
将显示内容放到容器中 ，通过值传递 ，监听鼠标移入事件 ，鼠标移入后将容器append到body
监听鼠标移动事件 ，根据鼠标的e.clientY ，e.clientX修改容器位置 监听鼠标移出事件 ，销毁容器3 、代码
// 自定义提示指令
directives: {
tooltip(el, binding){
// 鼠标移入时 ，将浮沉元素插入到body中
el.onmouseenter = function (e) {
// 创建浮层元素并设置样式
const vcTooltipDom = document.createElement("div");
vcTooltipDom.style.cssText = `
position:absolute;
background: #fff;;
color:#fff;
font-size:14px;
z-index:1000
;
// 设置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);
};
},
},
4 、在元素上使用
<div v-tooltip :tip=youtxt></div>
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！