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

这篇具有很好参考价值的文章主要介绍了vue 鼠标划入划出多传一个参数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

举个栗子: 做一个hover提示弹窗组件(用的vue3框架 + less插件)
可以将组件放在代码的最外层文章来源地址https://www.toymoban.com/news/detail-843303.html

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

到了这里,关于vue 鼠标划入划出多传一个参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包