vue如何实现鼠标经过显示悬浮框效果

这篇文章给大家分享的是有关Vue如何实现鼠标经过显示悬浮框效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体内容如下

项目架构采用vue-cli脚手架搭建的webpack项目

实现的效果如下：

鼠标经过button 右边显示出一个悬浮框 鼠标移出buttom元素 悬浮框隐藏 并且悬浮框可以随着鼠标的移动而改变位置

全部代码如下：

<template>  <div class="hello">    <div id="focus_toolTip" class="special_focus_toolTip" v-html="toolTopbody"></div>    <button      class="buttonStyle"      @mousemove="itemMousemove($event)"      @mouseover="itemMouseover"      @mouseout="itemMouseout"    >悬浮框测试</button>  </div></template><script>import $ from "Jquery";export default {  name: "HelloWorld",  data() {    return {      toolTopbody: ""    };  },  methods: {    itemMouseover: function() {      var focusTooltip = $("#focus_toolTip");      focusTooltip.CSS("display", "block");    },    itemMouseout: function() {      var focusTooltip = $("#focus_toolTip");      focusTooltip.css("display", "none");    },    itemMousemove: function(e) {      var self = this;      var focusTooltip = $("#focus_toolTip");      focusTooltip.css("top", e.clientY - 80 + "px");      focusTooltip.css("left", e.clientX + 100 + "px");      var headerHtml =        "<div style='font-size:12px;color: #fec443;font-weight: bold;font-family: MicrosoftYaHei;'>" +        "我的悬浮框参考：" +        "</div>";      var effectHtml =        "<div style='font-size:12px;margin-top:5px;'>" + "</div>";      self.toolTopbody = headerHtml + effectHtml;    }  }};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.buttonStyle {  margin-left: 150px;}.special_focus_toolTip {  z-index: 7;  position: absolute;  display: none;  width: 400px;  height: 130px;  border-style: solid;  transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),    top 0.4s cubic-bezier(0.23, 1, 0.32, 1);  background-color: rgba(50, 50, 50, 0.701961);  border-width: 0px;  border-color: #333333;  border-radius: 4px;  color: #ffffff;  font-style: nORMal;  font-variant: normal;  font-weight: normal;  font-stretch: normal;  font-size: 14px;  font-family: "Microsoft YaHei";  line-height: 21px;  padding: 10px 10px;}</style>

主要实现思路：

首先展示的悬浮框是绝对定位并且一开始是隐藏的display:none，触发 mouseover事情的时候把元素展示出来focusTooltip.css(“display”, “block”); 触发itemMouseout事件的时候把它隐藏掉focusTooltip.css(“display”, “none”); 然后当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件， 这个时候通过Event 对象拿到鼠标的位置（备注：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态），然后稍微调整下位置，最后给悬浮框的div元素设置top 和left属性， 其实悬浮框是基于html定位的 他的父元素没有相对定位position: relative; 不然会影响到top和left的属性，因为absolute会基于父元素relative进行定位。 鼠标事件整体触发的顺序为mouseover->mousemove->mouseout 最后悬浮框里面的内容会根据v-html对应的内容渲染（这块展示的内容由自己定义）

感谢各位的阅读！关于“vue如何实现鼠标经过显示悬浮框效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！