懸浮窗樣式設置+跟隨鼠標移動的懸浮框demo

 

 

// template
<div id="tooltips" :style="tooltipStyle">
          <ul v-for="item in tooltipDatas" :key="item">
            <li>{{ item }}</li>
          </ul>
</div>
                   
// data
// show the config boxArea
tooltipDatas: [],
tooltipStyle: "display:none;",

// created
    window.addEventListener("showTooltip", this.showToolTips);

// beforeDestroy
  beforeDestroy() {
    removeEventListener("showSubDetail", this.clickEventFunc);
    window.removeEventListener("showTooltip", this.showToolTips);
  }

// methods
showToolTips(event) {
      var self = this;
      var arrays = event.detail.textstring.split(";");
      self.tooltipDatas = arrays;
      self.tooltipStyle = `left:${
        event.detail.e.clientX.toString() + "px"
      };top:${event.detail.e.clientY.toString() + "px"};display:block;`;
    },

 懸浮移出后的隱藏

 上文為自定義事件的高級版本

下面是原生事件mouseenter與mouseleave版本，更親切

<template>
  <div>
    <el-button
      class="cursor"
      v-for="(item, index) in 5"
      :key="index"
      @mouseenter.native="handleClick"
      @mouseleave.native="hiddenTool"
      >{{ item }}<br
    /></el-button>
    <span v-show="showTool" class="tooltip" :style="tooltipStyle">tooltip</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTool: false,
      tooltipStyle: "",
    };
  },
  methods: {
    handleClick(e) {
      this.showTool = true;
      this.tooltipStyle = `left:${(e.clientX+20).toString() + "px"};top:${
        (e.clientY+20).toString() + "px"
      };display:block;`;
    },
    hiddenTool() {
      this.showTool = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.tooltip {
  position: fixed;
  z-index: 100;
  background-color: rgb(103, 166, 238);
}
</style>

注意懸浮框的樣式，fixed且z-index要設置高一點。

效果如圖

 ?JavaScript 自定義事件如此簡單！ - SegmentFault 思否

VUE跟隨鼠標懸浮框效果示例_勤勤懇懇的小前端的博客-CSDN博客_vue鼠標懸停並以懸浮框顯示