网站名称 备案seo技术教程博客

// item可以传递弹窗显示数据， $event相关参数可以用来做弹窗定位用
@mouseover="handleMouseOver($event, item)" @mouseleave="handleMouseLeave($event, item)"

举个栗子： 做一个hover提示弹窗组件(用的vue3框架 + less插件)
可以将组件放在代码的最外层

<divv-show="show"ref="recentRef"class="recent-item-tip":style="{ left: posX + 'px', top: posY + 'px', opacity: opacity }"@mouseover="handleMouseOver2" @mouseleave="handleMouseLeave2">{{ '这里添加提示相关信息' }}
</div><script>
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 = ref<HTMLDivElement | 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;
}
</script><style lang="less">.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>