当某div或内容超出一屏时,用户需要查看信息,tips 只能在固定位置显示,用户体验感差
一:安装 v-tooltip
npm install v-tooltip@1.1.6 # 我使用的是该版本的
二:使用
I. 全局引用
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
II. HTML片段
<div
v-tooltip
tips="tips内容"
></div>
III. JS片段
export default{
// 自定义提示指令
directives: {
tooltip(el, binding){
// 鼠标移入时,将浮沉元素插入到body中
el.onmouseenter = function (e) {
// 创建浮层元素并设置样式
const vcTooltipDom = document.createElement("div");
vcTooltipDom.style.cssText = `
position:absolute;
background: #fff;
border-radius: 4px;
border: 1px solid #ebeef5;
padding: 3px 5px;
z-index: 2000;
color: #606266;
text-align: justify;
font-size: 12px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
word-break: break-all;
display: none;
`;
// 设置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";
vcTooltipDom.style.display = "block";
};
// 鼠标移出时将浮层元素销毁
el.onmouseleave = function () {
// 找到浮层元素并移出
const vcTooltipDom = document.getElementById("vc-tooltip");
vcTooltipDom && document.body.removeChild(vcTooltipDom);
};
},
},
}