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的更多相关文章

  1. 基于vue开发的element-ui树形控件报错问题解决

    对没错,这次又是ElementUI的问题,在使用ElementUI中的 tree 树形控件时需要动态添加DOM元素,但是在使用文档中给出的案例的时候会报错. 案例:ElementUI树形控件 - 自定 ...

  2. 基于vue的UI框架集锦

    前端框架百花齐放.争奇斗艳,令人眼花缭乱.大神们一言不合就整一个框架出来,另小白们无所适从.下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀. (1)Eleme ...

  3. [译]基于Vue.js的10个最佳UI框架,用于构建移动应用程序

    原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...

  4. 基于Vue的Ui框架

    基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动 ...

  5. 基于Vue的前端UI组件库的比对和选型

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...

  6. 优秀的基于VUE移动端UI框架合集

    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...

  7. 基于Vue的Quasar Framework 介绍 这个框架UI组件很全面

    基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...

  8. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  9. GearCase UI - 自己构建一套基于 Vue 的简易开源组件库

    最近 1 ~ 2 月除了开发小程序之外,还一直在继续深入的学习 Vuejs.利用零碎.闲暇的时间整合了一套基于 Vue 的 UI 组件库.命名为 GearCase UI,意为齿轮盒.现在把该项目进行开 ...

随机推荐

  1. Spring Boot的第一个程序

    Spring boot是由Pivotal团队提供的全新框架,在设计之初,其目的是为了简化Spring应用的创建.运行.测试.调试.部署的过程.Spring Boot框架不仅简化了Spring的搭建过程 ...

  2. The listener supports no services

    问题描述 sql> lsnrctl start 提示: The listener supports no services The command completed successfully ...

  3. 网络编程三 Socket

    1.根据netstat端口的找到进程号---->根据进程号找到进程名称-------->终止进程 1) netstat    最后一列是5432 C:\Users\Administrato ...

  4. 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

    今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素displ ...

  5. springAop注解式Demo

    package AnnoAspect.Aspect; import org.aspectj.lang.ProceedingJoinPoint; import org.aspectj.lang.anno ...

  6. Comedi的学习过程

    1.介绍Comedi 1.1Comedi是一个设备驱动开发的软件工具,它采用了一种3层组织模型:上层是用户层,Comedi提供了在用户控件编写程序的接口Comedilib,通过系统调用来控制硬件设备: ...

  7. c# 获取 bios 序列号

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.M ...

  8. Mybatis逆向工程的配置

    源码github下载地址:https://github.com/wcyong/mybatisGeneratorCustom.git 参考文章:https://www.cnblogs.com/whgk/ ...

  9. php session的一些操作

    <?php /** * Session控制类 */ class Session{ /** * 设置session * @param String $name session name * @pa ...

  10. 左耳听风-ARTS-第4周(2019/4/21-2019/4/27)

    Algorithm 本周的算法题是删除已排序数据中的重复数字(https://leetcode.com/problems/remove-duplicates-from-sorted-array/).这 ...