群晖 nas 做网站,建设网站的报价,新媒体营销六种方式,三里屯做网站的公司// item可以传递弹窗显示数据#xff0c; $event相关参数可以用来做弹窗定位用
mouseoverhandleMouseOver($event, item) mouseleavehandleMouseLeave($event, item)举个栗子#xff1a; 做一个hover提示弹窗组件(用的vue3框架 less插件) 可以将组件…// item可以传递弹窗显示数据 $event相关参数可以用来做弹窗定位用
mouseoverhandleMouseOver($event, item) mouseleavehandleMouseLeave($event, item)举个栗子 做一个hover提示弹窗组件(用的vue3框架 less插件) 可以将组件放在代码的最外层
divv-showshowrefrecentRefclassrecent-item-tip:style{ left: posX px, top: posY px, opacity: opacity }mouseoverhandleMouseOver2 mouseleavehandleMouseLeave2{{ 这里添加提示相关信息 }}
/divscript
import { ref, ,nextTick } from vue;
// 提示内容
const titleInfo ref()
// 鼠标的横轴
let posX ref(0);
// 鼠标纵轴
let posY ref(0);
// 控制显隐
let show ref(false);
// 是否透明
let opacity ref(0);
// 触发hover的DOM
const recentRef refHTMLDivElement | null(null);
const timer ref(null);
// 获取鼠标位置
function handleMouseOver(e, item) {titleInfo.value item.titleInfo;// 防抖if (timer.value) {clearTimeout(timer.value);}timer.value setTimeout(() {// 更新列表handleChangePos(e, item);clearTimeout(timer.value);}, 500);
}
// 这两个xx2函数是为了当鼠标划入提示弹窗内让弹窗不消失
function handleMouseOver2(e, item) {show.value true;
}
function handleMouseLeave2(e, item) {show.value false;
}
// 提示框定位
function handleChangePosition(e, item) {show.value true;pushInfo.value item.pushTime;let clientHeight document.documentElement.clientHeight;let clientWidth document.documentElement.clientWidth;let pointX e.clientX;let pointY e.clientY;nextTick(() {// 内容宽高let selfWidth recentRef.valueOf.clientWidth;let selfHeight 80;if (pointX selfWidth clientWidth) {pointX clientWidth - selfWidth - 10;}if (pointY selfHeight clientHeight) {pointY clientHeight - selfHeight - 10;}opacity.value 1;posX.value pointX;posY.value pointY;});
}
// 鼠标滑走隐藏
function handleMouseLeave() {// show.value false;// opacity.value 0;// pushInfo.value ;clearTimeout(timer.value);timer.value null;
}
/scriptstyle langless.recent-item-tip {height: 80px;width: 200px;overflow-y: scroll;position: fixed;z-index: 999;top: 0;left: 0;font-size: 12px;padding: 5px;line-height: 20px;box-sizing: border-box;word-break: keep-all;background-color: #fff; // #fffborder: 1px solid #1113171a; // #1113171Aborder-radius: 4px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);opacity: 0;}//滚动条样式::-webkit-scrollbar {width: 5px;height: 6px;border-radius: 16px;}::-webkit-scrollbar-thumb {border-radius: 16px;}::-webkit-scrollbar-track {border-radius: 16px;}
/style
