javascript - vue2vis组件中如何触发鼠标悬停事件

Question

我一直在尝试使用 visjs 设置网络拓扑组件，我正在使用 vue2vis 包来做到这一点。每次单击节点时，我都会按照文档触发事件，但是 hoverNode 和 selectNode 事件都没有提供任何控制台输出。难道我做错了什么。下面是我的网络组件

<template>
  <div>
    <networking
      ref="network"
      :nodes="nodes"
      :edges="edges"
      :options="options"
      :events="['selectNode', 'hoverNode']"
      @hoverNode="onNodeHovered"
      @selectNode="onNodeHovered"
    ></networking>
  </div>
</template>
<script>
export default {
  name: "Network",
  props: {
    jigTopology: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      nodes: [],
      edges: [],
      options: {
        autoResize: true,
        width: "100%",
        height: "500px",
        clickToUse: true,
        nodes: {
          shape: "circle"
        },
        edges: {
          chosen: {}
        },
        layout: {
          hierarchical: {
            enabled: true,
            levelSeparation: 100
          }
        },
        interaction: {
          hover: true
        },
        manipulation: {
          enabled: true
        }
      }
    };
  },
  methods: {
    onNodeHovered(event) {
      console.log("hovered", this.$refs.network.getEventProperties(event));
    }
  },
  beforeCreate() {},
  created() {},
  mounted() {
    (this.nodes = this.jigTopology.nodes),
      (this.edges = this.jigTopology.edges);
    console.log("nodes", this.nodes);
    console.log("edges", this.edges);
  }
};
</script>
<style scoped>
.vis-network {
  overflow: visible;
}
</style>

节点和边缘数据由另一个组件生成并作为道具传递给它。

标签： javascriptvue.jsvuejs2vis.jsvis.js-network

Answer 1

确保检查选项>交互>悬停：true

interaction: {
  hover: true
}