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";

安装并应用该包后,指定节点的shapevue-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渲染节点)相关推荐

  1. VUE中使用Antv.X6实现将侧边导航栏节点拖拽到画布中,并能够将画布保存到缓存中

    直接上代码,参考官网的文档安装完之后可以直接运行. <template><div class="home"><div class="left ...

  2. antv x6节点node

    1.实现 <template><a-button @click="test1">test1:构造函数</a-button><a-butto ...

  3. antv/G6使用记录,vue组件实现节点、边的动态增减、右键事件等功能

    antv/G6使用记录,vue组件实现节点.边的动态增减.右键事件等功能 基本展示 功能点: 特性: ==完整代码== ==示例数据== 补充说明: 基本展示  antv/G6是蚂蚁金服数据可视化团队 ...

  4. Vue渲染DOM节点

    Virtual DOM Vue实例挂载的最后一个环节:渲染DOM节点.在渲染真实DOM的过程中,Vue引进了虚拟DOM的概念,虚拟DOM作为JS对象和真实DOM中间的一个缓冲存,极大的优化了JS频繁操 ...

  5. vue如何通过VNode渲染节点

    vue如何通过VNode渲染节点 vue的源码包含三大核心 实现一个Mini-Vue 渲染系统的实现 vue2和vue3写法上的区别 vue的源码包含三大核心 Compiler模块:编译模板系统 Ru ...

  6. Vue项目中使用AntV X6绘制流程图

    Vue项目中使用AntV X6绘制流程图 一.需求 在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...

  7. 记录--VUE使用antv X6实现流程图

    安装npm install @antv/x6 --save 引入import { Graph, Addon } from "@antv/x6"; 说明:如果没有自定义拖拽到画布的需 ...

  8. 前端vue:节点、树以及虚拟 DOM

    每天认真学习一个vue 知识点呀! 节点 在深入渲染函数render()之前,了解一些浏览器的工作原理是很重要的.以下面这段 HTML 为例: <div><h1>My titl ...

  9. vue实现echarts树图修改节点图片,修改连线颜色,鼠标悬停显示详情,鼠标右键弹出菜单,搜索,导出PNG,高亮,查看节点是否还有子节点,修改树图的展示方式

    其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章 首先,实现效果入下图: ...

最新文章

  1. maven环境快速搭建
  2. 如何存储Session
  3. linux VNC简单配置
  4. struts2中文件上传
  5. Confluence 6 升级以后
  6. 【Qt教程】2.4 - Qt5 控件 - QListWidget列表框
  7. Android 布局左中右布局
  8. 浅析计算机软件可靠性设计
  9. SAP报表程序的下载上传
  10. 基于Java模板技术动态生成Word文档
  11. 云计算与大数据技术应用 第四章
  12. 英特尔神经计算棒_如何设置英特尔Movidius神经计算棒
  13. matlab 计算相关系数,MATLAB如何使用corrcoef函数计算样本数据的相关系数
  14. 复试21天Day 21
  15. 代码查重——LCS、Levenshtein距离、Jaro-Whinkle距离和变量代换
  16. 深度技术 GHOST XP 电脑城克隆版 V7.0 (NTFS/F32)
  17. 卢松松博客专访胡茬:解密程序员互联网创业历程
  18. 小程序ios页面数据空白问题
  19. MySQL系列——MySQL实现序列(Sequence)效果
  20. Web安全技术—常见的攻击和防御

热门文章

  1. 什么叫软件测试工程师?
  2. 对象可以创建数组吗_男方找对象可以要求女方有房有车有存款吗
  3. Centos安装lrzsz
  4. 纯css阴阳旋转js特效代码
  5. 电路交换和分组交换详解
  6. C#可视化编程技术第三章:DBHelper类(内含思路、代码、注释)
  7. Apache Geode 1.3 初步配置
  8. device_create 函数详细分析
  9. 小程序分享给好友列表以及分享到朋友圈
  10. 洛谷P4956 [COCI2017-2018#6] Davor