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. 一个简单的定向python爬虫爬取指定页面的jpg图片

    import requests as r import re resul=r.get("http://www.imooc.com/course/list") urlinfo=re. ...

  2. mysql 两张表的数据设置主外健关联删除

    image_group 主表 image 副表 alter table image add constraint fk_group_idforeign key (group_id)references ...

  3. Ubuntu网络不通解决办法

    如下问题: 尝试和Host主机互ping也不通, Ubuntu: vmware 桥接模式 IP:192.168.1.202/24 gateway:192.168.1.1 Host主机:网络正常 IP: ...

  4. Python基础:六、变量和常量

    一.变量 1. 变量: 将运算的中间结果暂存到内存,以便后续程序调用 2. 变量的作用: 代指内存里某个地址中保存的内容 3. 变量的命名规则: 1. 变量由字母.数字.下划线搭配组合而成 2. 不可 ...

  5. gtest 参数化

    前言: 在测试用例中,我们时常需要传给被测函数不同的值,gtest为我们提供了简便的方法,可以使我们能够灵活的进行参数化测试. 步骤: 1.创建一个类,继承testing::TestWithParam ...

  6. iTrash for Mac(卸载工具)破解版含注册机

    iTrash for Mac是一款专为Mac用户打造非常好用的卸载工具,itrash mac版简单好用,只需要把需要卸载的程序的拖拽到iTrash Mac版窗口内就可以删除应用程序.现为大家带来itr ...

  7. Battle Zone 战争地带

    发售年份 1980 平台 街机 开发商 雅达利(Atari) 类型 射击 https://www.youtube.com/watch?v=Ctr54kopo8I

  8. python selenium-webdriver 执行js (八)

    使用python selenium 做自动化测试的时候其实我基本没有使用过执行js,只是在后来使用selenium来爬虫的时候使用到了,所以我在这里也就拿出来简单的介绍一下如何执行js. execut ...

  9. Django的安装和启动以及第一个工程的建立

    ---恢复内容开始--- 前提:已经安装了python和Anaconda (windows系统) 在Anaconda安装好之后,其文件夹下有一个叫做Anaconda Prompt的工具,类似windo ...

  10. 如何去maven仓库下载jar包

    Maven仓库地址 : http://search.maven.org/ https://mvnrepository.com/ 或者你直接百度搜索 : maven仓库 第一个就是 我现在想下载myba ...