vue自定义指令添加跟随鼠标光标提示框v-tooltip方式
作者:骑上我心爱的小摩托
这篇文章主要介绍了vue自定义指令添加跟随鼠标光标提示框v-tooltip方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
自定义指令添加跟随鼠标光标提示框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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。