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

问题描述

我一直在尝试使用 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>

节点和边数据由另一个组件生成并作为 props 传递给 this。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）