項目中產(chǎn)品提了一個這樣的需求（鼠標(biāo)懸浮標(biāo)簽之上展示標(biāo)簽信息），老大一直問能不能實現(xiàn)？其實很簡單！他不確定的點是在他寫的位置不對，還有取的定位值不對，因為如果是說單純從樹節(jié)點自定義滑入滑出顯示定位標(biāo)簽的話當(dāng)列表內(nèi)容過多出現(xiàn)滾動條的時候會導(dǎo)致標(biāo)簽內(nèi)容被遮??！那這個時候我們就可以考慮除了子元素相對定位之外還有什么方法可以獲取到當(dāng)前位置進行內(nèi)容跟隨顯示，那就是我們的鼠標(biāo)位置信息?？梢酝ㄟ^獲取鼠標(biāo)位置信息，設(shè)置標(biāo)簽信息模塊在外層，通過獲取鼠標(biāo)距離X軸Y軸的位置進行固定定位！一下代碼實現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-763202.html

<template>
    <div class="a">
        <el-tree
            :default-expand-all="activeName == 1"
            ref="tree"
            show-checkbox
            :data="data"
            node-key="id"
            :default-checked-keys="defaultCheckIds"
            :filter-node-method="filterNode"
            @check-change="handleCheckChange">
            <span slot-scope="{node,data}" class="custom-tree-node"
            @mouseenter="event => mousenter(event,data)"
            @mouseleave="event => mouseleave(event,data)"></span>
            <span class="treeNodeStyle">{{node.label}}</span>
        </el-tree>

    <!--要顯示的標(biāo)簽信息-->
        <div
      v-if="show"
      class="suspension"
      :style="{ top: y + 'px', left: x + 'px' }">
      <div>
        <span>標(biāo)簽名稱：&lt;/span&gt;&lt;span&gt;{{ tagInfo.label }}</span>
      </div>
      <div>
        <span>最新數(shù)據(jù)時間：</span><span>{{ tagInfo.latestDataTime }}</span>
      </div>
      <div>
        <span>刷新周期：</span><span>{{
          tagInfo.refreshCycle === 1
            ? "日"
            : tagInfo.refreshCycle === 2
            ? "周"
            : tagInfo.refreshCycle === 3
            ? "月"
            : ""
        }}</span>
      </div>
      <div>
        <span>業(yè)務(wù)口徑：</span><span》{{ tagInfo.businessCaliber }}</span>
      </div>
    </div>
    </div>

</template>
export default {
  data() {
    return {
      show: false,
      x: "", //跟隨鼠標(biāo)光標(biāo)x軸位置
      y: "", //跟隨鼠標(biāo)光標(biāo)Y軸位置
      tegInfo: {}
    };
  },
  methods: {
    // 樹節(jié)點鼠標(biāo)移入
    mouseenter(event, data) {
      if (data.tagExplain === 1) {
        this.show = true;
        this.tagInfo = data;
        //獲取鼠標(biāo)光標(biāo)位置
        let e = event || window.event;
        let scrollX =
          document.documentElement.scrollLeft || document.body.scrollLeft;
        let scrollY =
          document.documentElement.scrollTop || document.body.scrollTop;
        this.x = e.pageX || clientX + scrollX;
        this.y = e.pageY || clientY + scrollY;
      }else{
        return;
      }
    },
    // 樹節(jié)點鼠標(biāo)移出
    mouseleave(node, data) {
      this.show = false;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.handleCheckChange();
    });
  }
};
</script>

<style lang="scss" scoped>
.suspension {
  position: fixed;
  z-index: 99;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.3);
}
</style>

到了這里，關(guān)于實現(xiàn)elementui-tree組件鼠標(biāo)滑過顯示標(biāo)簽信息的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！