实现elementui-tree组件鼠标滑过显示标签信息-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现elementui-tree组件鼠标滑过显示标签信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目中产品提了一个这样的需求（鼠标悬浮标签之上展示标签信息），老大一直问能不能实现？其实很简单！他不确定的点是在他写的位置不对，还有取的定位值不对，因为如果是说单纯从树节点自定义滑入滑出显示定位标签的话当列表内容过多出现滚动条的时候会导致标签内容被遮住！那这个时候我们就可以考虑除了子元素相对定位之外还有什么方法可以获取到当前位置进行内容跟随显示，那就是我们的鼠标位置信息。可以通过获取鼠标位置信息，设置标签信息模块在外层，通过获取鼠标距离X轴Y轴的位置进行固定定位！一下代码实现文章来源地址https://www.toymoban.com/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>

    <!--要显示的标签信息-->
        <div
      v-if="show"
      class="suspension"
      :style="{ top: y + 'px', left: x + 'px' }">
      <div>
        <span>标签名称：&lt;/span&gt;&lt;span&gt;{{ tagInfo.label }}</span>
      </div>
      <div>
        <span>最新数据时间：</span><span>{{ tagInfo.latestDataTime }}</span>
      </div>
      <div>
        <span>刷新周期：</span><span>{{
          tagInfo.refreshCycle === 1
            ? "日"
            : tagInfo.refreshCycle === 2
            ? "周"
            : tagInfo.refreshCycle === 3
            ? "月"
            : ""
        }}</span>
      </div>
      <div>
        <span>业务口径：</span><span》{{ tagInfo.businessCaliber }}</span>
      </div>
    </div>
    </div>

</template>
export default {
  data() {
    return {
      show: false,
      x: "", //跟随鼠标光标x轴位置
      y: "", //跟随鼠标光标Y轴位置
      tegInfo: {}
    };
  },
  methods: {
    // 树节点鼠标移入
    mouseenter(event, data) {
      if (data.tagExplain === 1) {
        this.show = true;
        this.tagInfo = data;
        //获取鼠标光标位置
        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;
      }
    },
    // 树节点鼠标移出
    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>

到了这里，关于实现elementui-tree组件鼠标滑过显示标签信息的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！