From 3445fb695f606feebf12e4de0740d76cdc4bd8d4 Mon Sep 17 00:00:00 2001 From: spiritree Date: Mon, 11 Dec 2017 08:58:32 +0800 Subject: [PATCH] docs: add zh-cn --- README.md | 2 +- assets/tree.svg | 1 + docs/_navbar.md | 3 ++ docs/_sidebar.md | 1 + docs/exportpic.md | 30 +++++++++++++++++ docs/index.html | 8 +++-- docs/props.md | 6 ++-- docs/quickstart.md | 4 +++ docs/style.css | 5 ++- docs/zh-cn/README.MD | 15 +++++++++ docs/zh-cn/_navbar.md | 3 ++ docs/zh-cn/_sidebar.md | 9 +++++ docs/zh-cn/basic.md | 29 ++++++++++++++++ docs/zh-cn/drag.md | 30 +++++++++++++++++ docs/zh-cn/edit.md | 61 +++++++++++++++++++++++++++++++++ docs/zh-cn/exportpic.md | 30 +++++++++++++++++ docs/zh-cn/panzoom.md | 31 +++++++++++++++++ docs/zh-cn/props.md | 73 ++++++++++++++++++++++++++++++++++++++++ docs/zh-cn/quickstart.md | 46 +++++++++++++++++++++++++ 19 files changed, 379 insertions(+), 8 deletions(-) create mode 100644 assets/tree.svg create mode 100644 docs/_navbar.md create mode 100644 docs/exportpic.md create mode 100644 docs/zh-cn/README.MD create mode 100644 docs/zh-cn/_navbar.md create mode 100644 docs/zh-cn/_sidebar.md create mode 100644 docs/zh-cn/basic.md create mode 100644 docs/zh-cn/drag.md create mode 100644 docs/zh-cn/edit.md create mode 100644 docs/zh-cn/exportpic.md create mode 100644 docs/zh-cn/panzoom.md create mode 100644 docs/zh-cn/props.md create mode 100644 docs/zh-cn/quickstart.md diff --git a/README.md b/README.md index 4bffec2..87b7576 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -
+
vue-orgchart logo
diff --git a/assets/tree.svg b/assets/tree.svg new file mode 100644 index 0000000..753abef --- /dev/null +++ b/assets/tree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/_navbar.md b/docs/_navbar.md new file mode 100644 index 0000000..0224081 --- /dev/null +++ b/docs/_navbar.md @@ -0,0 +1,3 @@ +- Translations + - [:cn: 中文](/zh-cn/) + - [:uk: English](/) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index c98c52f..a703d8a 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -5,4 +5,5 @@ - [Basic Orgchart](basic) - [Pan/Zoom Orgchart](panzoom) - [Draggable Orgchart](drag) + - [Export Picture Orgchart](exportpic) - [Editable Orgchart](edit) diff --git a/docs/exportpic.md b/docs/exportpic.md new file mode 100644 index 0000000..6c90ba9 --- /dev/null +++ b/docs/exportpic.md @@ -0,0 +1,30 @@ +## Export Picture OrgChart + +```html +/*vue*/ + + + +``` diff --git a/docs/index.html b/docs/index.html index 30ac346..d5d7484 100644 --- a/docs/index.html +++ b/docs/index.html @@ -14,17 +14,18 @@
- + + diff --git a/docs/props.md b/docs/props.md index 8885b42..989ed28 100644 --- a/docs/props.md +++ b/docs/props.md @@ -2,15 +2,15 @@ ### Example -`` +`` -`` +`` ### Props - + diff --git a/docs/quickstart.md b/docs/quickstart.md index 964d07b..e69866f 100644 --- a/docs/quickstart.md +++ b/docs/quickstart.md @@ -40,3 +40,7 @@ export default { ``` ### CDN +```html + + +``` diff --git a/docs/style.css b/docs/style.css index fe38e19..d10ccff 100644 --- a/docs/style.css +++ b/docs/style.css @@ -33,4 +33,7 @@ iframe { text-align: center; } - +.markdown-section tr { + border: 1px solid #fff; + background:#fff; +} diff --git a/docs/zh-cn/README.MD b/docs/zh-cn/README.MD new file mode 100644 index 0000000..b4bc3a2 --- /dev/null +++ b/docs/zh-cn/README.MD @@ -0,0 +1,15 @@ +## vue-orgchart + +> A vue wrapper for OrgChart.js. + +### 前言 +- 首先感谢dabeng的Orgchart.js -- [OrgChart.js](https://github.com/dabeng/OrgChart.js) +- 如果你想用OrgChart.js的Vue封装，可以直接用 [我的项目](https://github.com/spiritree/vue-orgchart) + +### 功能 +- JSON格式导入导出树形关系图 +- 支持树形关系图导出图片 +- 可拖拉树形关系图 +- 可编辑树形关系图 + +... diff --git a/docs/zh-cn/_navbar.md b/docs/zh-cn/_navbar.md new file mode 100644 index 0000000..0224081 --- /dev/null +++ b/docs/zh-cn/_navbar.md @@ -0,0 +1,3 @@ +- Translations + - [:cn: 中文](/zh-cn/) + - [:uk: English](/) diff --git a/docs/zh-cn/_sidebar.md b/docs/zh-cn/_sidebar.md new file mode 100644 index 0000000..1d17a18 --- /dev/null +++ b/docs/zh-cn/_sidebar.md @@ -0,0 +1,9 @@ +- 入门 + - [快速开始](zh-cn/quickstart) + - [图表属性](zh-cn/props) +- 图表 + - [基础组织树图](zh-cn/basic) + - [缩放组织树图](zh-cn/panzoom) + - [可拖拉组织树图](zh-cn/drag) + - [可导出组织树形图图片](zh-cn/exportpic) + - [可编辑组织树图](zh-cn/edit) diff --git a/docs/zh-cn/basic.md b/docs/zh-cn/basic.md new file mode 100644 index 0000000..53143f2 --- /dev/null +++ b/docs/zh-cn/basic.md @@ -0,0 +1,29 @@ +## 基础组织树图 + +```html +/*vue*/ + + + +``` diff --git a/docs/zh-cn/drag.md b/docs/zh-cn/drag.md new file mode 100644 index 0000000..a0b56ff --- /dev/null +++ b/docs/zh-cn/drag.md @@ -0,0 +1,30 @@ +## 可拖拉组织树图 + +```html +/*vue*/ + + + +``` + diff --git a/docs/zh-cn/edit.md b/docs/zh-cn/edit.md new file mode 100644 index 0000000..0562509 --- /dev/null +++ b/docs/zh-cn/edit.md @@ -0,0 +1,61 @@ +## 可编辑组织树图 + +```html +/*vue*/ + + + +``` +```json +``` diff --git a/docs/zh-cn/exportpic.md b/docs/zh-cn/exportpic.md new file mode 100644 index 0000000..c6884b6 --- /dev/null +++ b/docs/zh-cn/exportpic.md @@ -0,0 +1,30 @@ +## 可导出组织树图图片 + +```html +/*vue*/ + + + +``` diff --git a/docs/zh-cn/panzoom.md b/docs/zh-cn/panzoom.md new file mode 100644 index 0000000..55b2cd0 --- /dev/null +++ b/docs/zh-cn/panzoom.md @@ -0,0 +1,31 @@ +## 缩放组织树图 + + +```html +/*vue*/ + + + +``` diff --git a/docs/zh-cn/props.md b/docs/zh-cn/props.md new file mode 100644 index 0000000..0cb6e99 --- /dev/null +++ b/docs/zh-cn/props.md @@ -0,0 +1,73 @@ +### 图表属性 + +### 例子 + +`` + +`` + +!> 在非webpack等编译打包环境中，注意将camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)，如`chartName`=>`chart-name` + +### 属性 + +
NameTypeRequiffffffffffredDefaultDescription
NameTypeRequiredDefaultDescription
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
配置项类型需要默认描述
dataObject,Stringyes图表数据
panBooleannofalse鼠标拖放来平移该组织图
zoomBooleannofalse通过鼠标滚轮放大/缩小组织图
directionStringno"t2b"t2b(表示 "top to bottom", it's default value), b2t(表示 "bottom to top"), l2r(表示 "left to right"), r2l(表示 "right to left").
verticalDepthIntergerno垂直深度
toggleSiblingsRespBooleannofalse一旦启用此选项，用户可以显示/隐藏左/右兄弟节点分别点击左/右箭头
ajaxURLStringnoAjax获取JSON数据
depthPositive Intergerno999最大级别
nodeTitleStringno"name"树形组织图中的元素名称
parentNodeSymbolStringno"fa-users"父元素节点的图标class
nodeContentStringno树形组织图中二级元素名称
nodeIdStringno"id"节点的ID值
createNodeFunctionno一个回调函数来定制创造节点的规则
exportButtonBooleannofalse导出图片
exportFilenameStringno"Orgchart"导出图片名称
chartClassStringno""图标的class
draggableBooleannofalse可拖拉选项
dropCriteriaFunctionno可以通过函数来限制拖拽节点和放置区之间的关系。另外，这个函数接受三个参数（draggedNode，dragZone，dropZone），只返回boolean值。
diff --git a/docs/zh-cn/quickstart.md b/docs/zh-cn/quickstart.md new file mode 100644 index 0000000..eb16bbc --- /dev/null +++ b/docs/zh-cn/quickstart.md @@ -0,0 +1,46 @@ +## 快速开始 + +### 安装 +```shell +npm install vue-orgchart -S +``` + +### 在项目中导入 + +> `main.js` + +```js +import 'vue-orgchart/dist/style.min.css' +``` + +> In `*.vue` + +```js + +import { VoBasic } from 'vue-orgchart' +export default { + components: { VoEdit }, + created () { + this.chartData = { + name: 'JavaScript', + children: [ + { name: 'Angular' }, + { + name: 'React', + children: [{ name: 'Preact' }] + }, + { + name: 'Vue', + children: [{ name: 'Moon' }] + } + ] + } + } +} +``` + +### CDN +```html + + +```