在vue3中使用canvas:click不生效。 #5384

问题描述

我在vue3使用了官网的示例：https://g6.antv.antgroup.com/examples/net/forceDirected/#basicForceDirectedDragFix 对canvas:click的一些操作，console.log以及alert都无法触发

<template>
    <div id="mountNode"></div>
</template>

<script setup>
import G6 from '@antv/g6';
import { onMounted, ref } from 'vue';

const data = {
  nodes: [
    {
      id: '0',
      label: '0',
    },
    {
      id: '1',
      label: '1',
    },
    {
      id: '2',
      label: '2',
    },
    {
      id: '3',
      label: '3',
    },
    {
      id: '4',
      label: '4',
    },
    {
      id: '5',
      label: '5',
    },
    {
      id: '6',
      label: '6',
    },
    {
      id: '7',
      label: '7',
    },
    {
      id: '8',
      label: '8',
    },
    {
      id: '9',
      label: '9',
    },
  ],
  edges: [
    {
      source: '0',
      target: '1',
    },
    {
      source: '0',
      target: '2',
    },
    {
      source: '0',
      target: '3',
    },
    {
      source: '0',
      target: '4',
    },
    {
      source: '0',
      target: '5',
    },
    {
      source: '0',
      target: '7',
    },
    {
      source: '0',
      target: '8',
    },
    {
      source: '0',
      target: '9',
    },
    {
      source: '2',
      target: '3',
    },
    {
      source: '4',
      target: '5',
    },
    {
      source: '4',
      target: '6',
    },
    {
      source: '5',
      target: '6',
    },
  ],
};


let graph = ref(null)

onMounted(() => {
const width = container.scrollWidth;
const height = container.scrollHeight || 500;

const graph.value = new G6.Graph({
  container: 'mountNode',
  width,
  height,
  layout: {
    type: 'force',
    preventOverlap: true,
  },
  modes: {
    default: ['drag-canvas'],
  },
});graph.value.data(data);
graph.value.render();

function refreshDragedNodePosition(e) {
  const model = e.item.get('model');
  model.fx = e.x;
  model.fy = e.y;
}
graph.value.on('node:dragstart', (e) => {
  graph.value.layout();
  refreshDragedNodePosition(e);
});
graph.value.on('node:drag', (e) => {
  refreshDragedNodePosition(e);
});
graph.value.on('canvas:click', (e) => {
  console.log("canvas clicked")
});
if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.value.changeSize(container.scrollWidth, container.scrollHeight);
  };

}

重现链接

无

重现步骤

点击画布空白部分

预期行为

控制台打印了点击日志

平台

• centos 7
• vue3
• g6 4.8.21

屏幕截图或视频（可选）

No response

补充说明（可选）

No response