vue鼠标经过效果实现

如果只是显示span或者p全部文字的话，建议使用:title=“要显示的信息”

如果显示的内容比较多，需要弹出div弹框的话可以使用下面的方法
第一步：给要鼠标经过的字段加上，鼠标经过事件

v-on:mouseover="changeActive($event,scope.row)"
v-on:mouseout="removeActive"

第二步：制作要显示内容的div（versionTotal是定义的变量，默认是false，控制div是否显示）

<div
    v-if="versionTotal"
    class="version-total"
     :style="{position: absolute, top: floatTop, left: floatLeft}">
      <span>{{this.appVersionName}}</span>
      </div> 

第三步：写changeActive和removeActive的方法内容

   // 鼠标移入
    changeActive(e,data) {
    // 更改div的显示属性
      this.versionTotal = true;
      // 给需要设置的内容赋值
      this.appVersionName = data.appVersion;
      // X和Y坐标需要减去一部分像素，是为了和鼠标更接近，具体像素可以调整
      this.floatLeft = e.clientX - 180 + "px"; // 减去外层div的left距离
      this.floatTop = e.clientY - 55 + "px";
    },
    // 鼠标移出
    removeActive() {
     // 设置不显示
      this.versionTotal = false;
    },