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如何實現鼠標經過顯示懸浮框效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！