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