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

最新推荐文章于 2024-06-25 21:21:36 发布

大佬桑

最新推荐文章于 2024-06-25 21:21:36 发布

阅读量1k

点赞数 1

文章标签： vue.js 前端 javascript less

本文链接：https://blog.csdn.net/SSS01233210/article/details/133879121

版权

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

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

<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>