在vue中添加自定義指令，能夠識別dom，通過鼠標hover事件移入當前區(qū)域后，顯示浮層
- directives自定義提示指令
directives: {
// 自定義提示指令
tooltip: {
componentUpdated: function(el, binding) {
// 鼠標移入時，將浮沉元素插入到body中
el.onmouseenter = function(e) {
// 創(chuàng)建浮層元素并設(shè)置樣式
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
`;
// 設(shè)置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);
};
}
}
}
通過監(jiān)聽鼠標移入移出的mouse方法，設(shè)置浮層樣式與出現(xiàn)時機
2、div顯示dom標簽v-tooltip文章來源：http://www.zghlxwxcb.cn/news/detail-512161.html
<div id="bar-echart" tips="共有6個任務(wù)執(zhí)行成功" v-tooltip/>
此時運行后，出現(xiàn)浮層文章來源地址http://www.zghlxwxcb.cn/news/detail-512161.html
到了這里，關(guān)于vue自定義指令添加跟隨鼠標光標提示框v-tooltip的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
