relation-graph——数据组装+鼠标移入后的详情（自定义插槽的用法）——js技能提升

<template>
  <div class="relation-graph">
    <div class="graph-container" ref="graphContainer">
      <!-- 图表组件 -->
    </div>
    <div v-if="hoveredNode" class="node-details">
      <!-- 使用插槽展示详情，插槽名为 node-details-slot -->
      <slot name="nodeDetailsSlot" :node="hoveredNode"></slot>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'RelationGraph',
  data() {
    return {
      hoveredNode: null, // 鼠标悬浮的节点数据
    };
  },
  mounted() {
    // 监听鼠标移入事件
    this.$refs.graphContainer.addEventListener('mouseenter', this.handleMouseEnter);
    // 监听鼠标移出事件
    this.$refs.graphContainer.addEventListener('mouseleave', this.handleMouseLeave);
  },
  beforeDestroy() {
    // 移除事件监听
    this.$refs.graphContainer.removeEventListener('mouseenter', this.handleMouseEnter);
    this.$refs.graphContainer.removeEventListener('mouseleave', this.handleMouseLeave);
  },
  methods: {
    handleMouseEnter(event) {
      // 获取鼠标悬浮的节点数据
      const nodeData = this.getNodeDataFromEvent(event);
      if (nodeData) {
        this.hoveredNode = nodeData;
      }
    },
    handleMouseLeave() {
      this.hoveredNode = null;
    },
    getNodeDataFromEvent(event) {
      // 根据事件对象获取节点数据的逻辑
      // 这里省略具体实现，需要根据实际的图表库和数据结构来实现
    }
  }
};
</script>
 
<style scoped>
.relation-graph {
  position: relative;
}
.node-details {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: white;
  padding: 10px;
  border: 1px solid #ccc;
  /* 其他样式 */
}
</style>

这个代码实例展示了如何在Vue组件中使用自定义插槽来展示鼠标悬浮在图表上的节点详情。它包括了添加事件监听器来处理鼠标的移入和移出事件，以及如何通过插槽传递数据。