vue 鼠标划入划出多传一个参数

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

举个栗子: 做一个hover提示弹窗组件(用的vue3框架 + less插件)

可以将组件放在代码的最外层

javascript 复制代码
<div
   v-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; // #fff
    border: 1px solid #1113171a; // #1113171A
    border-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>
相关推荐
汪子熙几秒前
CSS 中 td:last-child a 选择器详解
前端·javascript
q567315237 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple14 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua21 分钟前
Vue3常用指令
前端·javascript·vue.js
欧阳天风21 分钟前
录音实时上传
前端·javascript
江号软件分享25 分钟前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长34 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
源码云商42 分钟前
基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
vue.js·spring boot·后端
江号软件分享43 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM1 小时前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js