antv/x6节点添加鼠标悬浮高亮和删除功能

antv/x6节点添加鼠标悬浮高亮和删除功能

    • 效果
    • 鼠标悬浮高亮
    • 鼠标移出恢复原状态

效果

antv/x6节点添加鼠标悬浮高亮和删除功能_第1张图片

鼠标悬浮高亮

    this.graph.on('node:mouseenter', ({ node }) => {
       node.addTools({
         name: 'button-remove',
         args: {
           x: '100%',
           y: 0,
           offset: { x: 0, y: 0 },
         },
       })
    })

鼠标移出恢复原状态

    this.graph.on('node:mouseleave', ({ node }) => {
       node.removeTools()
    })

你可能感兴趣的:(前端,vue,antv,前端,vue.js)