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>
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js