antv x6自定义节点(使用vue渲染节点）

1、安装@antv/x6-vue-shape

# npm
npm install @antv/x6-vue-shape# yarn
yarn add @antv/x6-vue-shape# 在 vue2 下还需要安装 @vue/composition-api
yarn add @vue/composition-api --dev

主文件引入@antv/x6-vue-shape

import "@antv/x6-vue-shape";

安装并应用该包后，指定节点的shape为vue-shape，并通过component属性来指定渲染节点的 Vue 组件。
2、自定义的节点

<template><div class="nodeElement"><el-image :src="url" class="icon"></el-image><div class="notation"><div class="name">{{ item.name }}</div></div></div>
</template><script>
export default {name: "Node",inject: ["getGraph", "getNode"],props: {// item: {},},data() {return {item: {},url: require("../../assets/icons/x6.png"),};},mounted() {const node = this.getNode();const { item } = node.getData();this.item = item;// 监听数据改变事件node.on("change:data", ({ current }) => {console.log("----,", current);});},methods: {},
};
</script>
<style lang="scss" scoped>
.nodeElement {display: flex;align-items: center;box-sizing: border-box;width: 200px;height: 32px;overflow: hidden;background-color: #fff;border-radius: 4px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);.icon {display: inline-flex;flex-grow: 0;align-items: center;justify-content: center;width: 32px;height: 32px;background-color: rgba(229, 238, 255, 0.85);border-radius: 4px 0 0 4px;}.notation {display: inline-flex;align-items: center;width: 166px;padding: 0 9px;user-select: none;& > * {flex-grow: 1;}.name {overflow-x: hidden;color: rgba(0, 0, 0, 0.65);font-size: 12px;white-space: nowrap;text-overflow: ellipsis;vertical-align: middle;}.statusIcon {display: inline-flex;flex-grow: 0;align-items: center;font-size: 14px;transform: translateZ(0);}}
}
</style>

3、注册节点并进行渲染

Graph.registerVueComponent("img-node",{template: `<Node />`,components: {Node,},},true);

注意：Node为自定义的节点组件，img-node是注册的节点名。

定义节点属性参数：

 let shape = {// inherit: "react-shape",shape: "vue-shape",width: 200,height: 32,component: "img-node",shape.label：'test采集任务04',data: {item: this.collectTaskItem,},attrs: {body: {rx: 4, // 圆角矩形ry: 4,strokeWidth: 0.4,stroke: "white",fill: "white",},},ports: ports,};
// 挂载至组件库 "group1"指组件库group1this.stencil.load(shape, "group1");

渲染结果：

完整文件（只涉及该功能，不是一个完整的项目）

链接：https://download.csdn.net/download/dmr123456/57054139

效果：（数据与后端接口绑定，实际使用需根据需要调整）

antv x6自定义节点(使用vue渲染节点）相关推荐

VUE中使用Antv.X6实现将侧边导航栏节点拖拽到画布中，并能够将画布保存到缓存中
直接上代码,参考官网的文档安装完之后可以直接运行. <template><div class="home"><div class="left ...
antv x6节点node
1.实现 <template><a-button @click="test1">test1:构造函数</a-button><a-butto ...
antv/G6使用记录，vue组件实现节点、边的动态增减、右键事件等功能
antv/G6使用记录,vue组件实现节点.边的动态增减.右键事件等功能基本展示功能点: 特性: ==完整代码== ==示例数据== 补充说明: 基本展示 antv/G6是蚂蚁金服数据可视化团队 ...
Vue渲染DOM节点
Virtual DOM Vue实例挂载的最后一个环节:渲染DOM节点.在渲染真实DOM的过程中,Vue引进了虚拟DOM的概念,虚拟DOM作为JS对象和真实DOM中间的一个缓冲存,极大的优化了JS频繁操 ...
vue如何通过VNode渲染节点
vue如何通过VNode渲染节点 vue的源码包含三大核心实现一个Mini-Vue 渲染系统的实现 vue2和vue3写法上的区别 vue的源码包含三大核心 Compiler模块:编译模板系统 Ru ...
Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...
记录--VUE使用antv X6实现流程图
安装npm install @antv/x6 --save 引入import { Graph, Addon } from "@antv/x6"; 说明:如果没有自定义拖拽到画布的需 ...
前端vue：节点、树以及虚拟 DOM
每天认真学习一个vue 知识点呀! 节点在深入渲染函数render()之前,了解一些浏览器的工作原理是很重要的.以下面这段 HTML 为例: <div><h1>My titl ...
vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式
其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章首先,实现效果入下图: ...

antv x6自定义节点(使用vue渲染节点）

antv x6自定义节点(使用vue渲染节点）相关推荐

最新文章

热门文章