基于vue和svg的树形UI
vue-svg-tree
基于vue和svg的动态树形UI
截图
应用
npm install vue-svg-tree
示例
<template><div><vue-svg-tree:treeData="treeData"svgId='svg'ref="svgTree"></vue-svg-tree></div>
</template><script>
import VueSvgTree from "vue-svg-tree"
export default {components:{VueSvgTree},data(){return {treeData:[{id: 100, name: 'Calamus', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你', value: 123, delay: 120, fatherId: 0,tlevel:1},{id: 101, name: 'Calamus1', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 0, fatherId: 100,tlevel:1},{id: 102, name: 'Calamus2', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 100, fatherId: 100,tlevel:0},{id: 103, name: 'Calamus3', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 100,tlevel:0},{id: 104, name: 'Calamus4', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 200, fatherId: 100,tlevel:0},{id: 105, name: 'Calamus5', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 101,tlevel:0},{id: 106, name: 'Calamus6', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},{id: 107, name: 'Calamus7', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},{id: 108, name: 'Calamus8', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},{id: 109, name: 'Calamus9', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},{id: 110, name: 'Calamus10', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},{id: 111, name: 'Calamus11', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},{id: 112, name: 'Calamus12', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 300, fatherId: 103,tlevel:0},{id: 113, name: 'Calamus13', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 103,tlevel:0},{id: 114, name: 'Calamus14', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},{id: 116, name: 'Calamus15', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},{id: 117, name: 'Calamus16', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我,而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},]}}
}
</script>
参数
参数 | 描述 | 类型 | 默认/是否必须 |
---|---|---|---|
treeData | 树形结构数据 | Array | 必须 |
direction | 树形方向 | String | ‘row’/‘col’(纵/横) |
svgId | svgId | String | ‘svgId’(一个页面多个图时svgId不能相同) |
curveness | 连接线是直线还是弧线 | Boolean | false(false:弧线;true:直线) |
ToDo
- [x]横向显示还有点小问题没有修复
- [x]弧度不可调整
- [x]框框样式暂时不可自定义,暂时建议复制源码修改,后期会修改为可配置,欢迎pr
链接
github
官网
基于vue和svg的树形UI相关推荐
- 一个基于vue和element-ui的树形穿梭框组件
el-tree-transfer 简介 因为公司业务使用vue框架,ui库使用的element-ui.在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之 ...
- 基于VUE的SVG动画处理(一)
基于VUE的SVG动画处理(一) 提示:涉及vue.photoshop.svg动画 一.创建SVG文件 方法一:使用photoshop绘制所需接线图,导出svg格式. 第一种:快速导出SVG编辑-&g ...
- 基于vue的svg画线_基于SVG的Vue图组件库
基于vue的svg画线 图表 (diagram-vue) A vue component library of diagrams. Vue组件图库. View Demo 查看演示 Download S ...
- 初探 amaze-vue( 基于vue.js封装的Amaze UI 组件库)
Amaze UI 是以移动优先(Mobile first)为理念,面向 HTML5 开发的国产优秀组件库.因官方未提供vue.js版本,而且民间一直对vue.js版本的 Amaze UI 组件库呼声很 ...
- oui:基于 Vue 的 OpenWrt 后台管理 UI 框架
快 使用静态页面:通过ubus存取各种系统数据 多用户 支持多用户及权限管理 Vue + Element-UI 加持 享受 Vue + Element-UI 的开发体验 项目主页:https://gi ...
- 基于vue的UI框架集锦(移动端+pc端)
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...
- 基于vue的响应式ui框架_基于Vue.js的响应式和可配置UI框架
基于vue的响应式ui框架 Framevuerk (Framevuerk) Fast, Responsive, Multi Language, Both Direction Support and C ...
- 基于vue的高仿网易云音乐网站,实现大多数功能
文章目录 前言 项目演示地址 线上地址 项目仓库 总结 前言 基于Vue + Vue-Router + Vuex + axios + elementui,ui参考网易云音乐,后端接口使用网易云音乐接口 ...
- 我写了一个面向源码阅读者的 UI 框架(基于 Vue)
轱辘 UI 官方文档 GitHub 轱辘 UI 是一个不太一样的 UI 框架. 本 UI 框架是一个「面向源码阅读者」的框架.如果对你有帮助,请不要吝惜你的 star. 也就是说,我制作这个框架的目的 ...
最新文章
- 使用modernizr.js检测浏览器对html5以及css3的支持情况
- flutter ios启动白屏_Flutter技术架构概览
- run as gradle test,未执行@Test中的内容(待解决)
- 禅道8.2-9.2.1注入GetShell
- Wordpress简约昼夜切换主页导航
- 转:关于Apache与Nginx的优势比较(经典)
- 如何将idea代码提交到远程仓库
- 计算机时间无法更改,电脑时间不能修改|系统时间改不了 四个解决方法
- 2022软考[嵌入式系统设计师]大纲
- 如何软著办理,软著申请步骤,软著办理流程
- 小说作者推荐:漫漫何其多合集
- HTML-用css样式定义div的边框样式
- 五子棋棋谱16*16c语言,五子棋开局棋谱大全
- 重新学习JSP之五——投票系统
- 终极单词index 排序 G-H
- html+css 导航条 变色
- 中国医科大学2021年9月《临床营养学》作业考核试题
- 解决git错误: error: The following untracked working tree files would be overwritten by merge
- 【JavaScript:语法】javascript函数定义以及常见用法
- 梯度下降法的推导(非常详细、易懂的推导)