docs: add zh-cn

spiritree · Dec 11, 2017 · 3445fb6 · 3445fb6
1 parent de05a2c
commit 3445fb6
Show file tree

Hide file tree

Showing 19 changed files with 379 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<div align="center">
+<div style="text-align:center">
   <img src="/assets/vue-orgchart.jpg" alt="vue-orgchart logo">
 </div>
 

diff --git a/assets/tree.svg b/assets/tree.svg
diff --git a/docs/_navbar.md b/docs/_navbar.md
@@ -0,0 +1,3 @@
+- Translations
+  - [:cn: 中文](/zh-cn/)
+  - [:uk: English](/)
diff --git 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
@@ -0,0 +1,30 @@
+## Export Picture OrgChart
+
+```html
+/*vue*/
+<template>
+  <vo-basic :data="chartData" :export-button=true export-filename="testpic"></vo-basic>
+</template>
+
+<script>
+export default {
+  created() {
+    this.chartData = {
+      name: 'JavaScript',
+        children: [
+          { name: 'Angular' },
+          {
+            name: 'React',
+            children: [{ name: 'Preact' }]
+          },
+          {
+
+            name: 'Vue',
+            children: [{ name: 'Moon' }]
+          }
+        ]
+    }
+  }
+}
+</script>
+```
diff --git a/docs/index.html b/docs/index.html
@@ -14,23 +14,25 @@
 <body>
   <div id="app"></div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
-  <script src="./index.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/babel-standalone"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-demo-box-vue/dist/docsify-demo-box-vue.min.js"></script>
+  <script src="./index.min.js"></script>
   <script>
     var jsResources = '<scr' + 'ipt src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></scr' + 'ipt>'
-                      + '\n<scr' + 'ipt src="https://om4v1ul08.qnssl.com//vue-orgchart/vue-orgchart.min.js"></scr' + 'ipt>'
-    var cssResources = '@import url("https://om4v1ul08.qnssl.com//vue-orgchart/style.min.css");'
+                      + '\n<scr' + 'ipt src="https://cdn.jsdelivr.net/npm/vue-orgchart/dist/vue-orgchart.min.js"></scr' + 'ipt>'
+    var cssResources = '@import url("https://cdn.jsdelivr.net/npm/vue-orgchart/dist/style.min.css");'
     window.$docsify = {
       coverpage: true,
       name: 'vue-orgchart',
       loadSidebar: true,
+      loadNavbar: true,
       repo: 'https://github.com/spiritree/vue-orgchart',
       plugins: [
         DemoBoxVue.create(jsResources, cssResources)
       ]
     }
   </script>
   <script src="https://cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/html2canvas@0.5.0-beta4/dist/html2canvas.min.js"></script>
 </body>
 </html>
diff --git a/docs/props.md b/docs/props.md
@@ -2,15 +2,15 @@
 
 ### Example
 
-`<vo-basic :data="chartData" :exportButton=true exportFilename="test"></vo-basic>`
+`<vo-basic :data="chartData" :draggable=true></vo-basic>`
 
-`<vo-edit :data="chartData" :exportButton=true exportFilename="test"></vo-edit>`
+`<vo-edit :data="chartData" :draggable=true></vo-edit>`
 
 ### Props
 
 <table>
   <thead>
-    <tr><th>Name</th><th>Type</th><th>Requiffffffffffred</th><th>Default</th><th>Description</th></tr>
+    <tr><th>Name</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr>
   </thead>
   <tbody>
     <tr>

diff --git a/docs/quickstart.md b/docs/quickstart.md
@@ -40,3 +40,7 @@ export default {
 ```
 
 ### CDN
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-orgchart/dist/style.min.css">
+<script src="https://cdn.jsdelivr.net/npm/vue-orgchart/dist/vue-orgchart.min.js"></script>
+```
diff --git 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
@@ -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
@@ -0,0 +1,3 @@
+- Translations
+  - [:cn: 中文](/zh-cn/)
+  - [:uk: English](/)
diff --git a/docs/zh-cn/_sidebar.md 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
@@ -0,0 +1,29 @@
+## 基础组织树图
+
+```html
+/*vue*/
+<template>
+  <vo-basic :data="chartData"></vo-basic>
+</template>
+
+<script>
+export default {
+  created() {
+    this.chartData = {
+      name: 'JavaScript',
+        children: [
+          { name: 'Angular' },
+          {
+            name: 'React',
+            children: [{ name: 'Preact' }]
+          },
+          {
+            name: 'Vue',
+            children: [{ name: 'Moon' }]
+          }
+        ]
+    }
+  }
+}
+</script>
+```
diff --git a/docs/zh-cn/drag.md b/docs/zh-cn/drag.md
@@ -0,0 +1,30 @@
+## 可拖拉组织树图
+
+```html
+/*vue*/
+<template>
+  <vo-basic :data="chartData" :draggable=true></vo-basic>
+</template>
+
+<script>
+export default {
+  created() {
+    this.chartData = {
+      name: 'JavaScript',
+        children: [
+          { name: 'Angular' },
+          { name: 'React'},
+          {
+            name: 'Vue',
+            children: [
+              { name: 'Moon' },
+              { name: 'San' }
+            ]
+          }
+        ]
+    }
+  }
+}
+</script>
+```
+
diff --git a/docs/zh-cn/edit.md b/docs/zh-cn/edit.md
@@ -0,0 +1,61 @@
+## 可编辑组织树图
+
+```html
+/*vue*/
+<template>
+  <div>
+    <vo-edit :data="chartData"></vo-edit>
+    <div id="edit-panel" class="view-state edit-container">
+    <div class="item item-half">
+      <div class="input-node-container">
+        <label class="selected-node-group">Selected Node</label>
+        <input type="text" id="selected-node" class="selected-node-group new-node">
+      </div>
+      <div>
+        <label>New Node</label>
+        <ul id="new-nodelist">
+          <li><input type="text" class="new-node"></li>
+        </ul>
+      </div>
+    </div>
+    <div id="node-type-panel" class="radio-panel item">
+      <input type="radio" name="node-type" id="rd-parent" value="parent" class=""><label for="rd-parent">Root</label>
+      <input type="radio" name="node-type" id="rd-child" value="children"><label for="rd-child">Child</label>
+      <input type="radio" name="node-type" id="rd-sibling" value="siblings"><label for="rd-sibling">Sibling</label>
+    </div>
+    <div class="item">
+      <button id="btn-add-nodes">Add</button>
+      <button id="btn-delete-nodes">Delete</button>
+      <button id="btn-reset">Reset</button>
+      <button id="btn-export">ExportJSON</button>
+    </div>
+  </div>
+  </div>
+</template>
+
+<script>
+export default {
+  created() {
+    this.chartData = {
+      name: 'JavaScript',
+        children: [
+          {
+            name: 'Angular',
+            children: [{ name: '?' }]
+          },
+          {
+            name: 'React',
+            children: [{ name: 'Preact' }]
+          },
+          {
+            name: 'Vue',
+            children: [{ name: 'Moon' }]
+          }
+        ]
+    }
+  }
+}
+</script>
+```
+```json
+```
diff --git a/docs/zh-cn/exportpic.md b/docs/zh-cn/exportpic.md
@@ -0,0 +1,30 @@
+## 可导出组织树图图片
+
+```html
+/*vue*/
+<template>
+  <vo-basic :data="chartData" :export-button=true export-filename="testpic"></vo-basic>
+</template>
+
+<script>
+export default {
+  created() {
+    this.chartData = {
+      name: 'JavaScript',
+        children: [
+          { name: 'Angular' },
+          {
+            name: 'React',
+            children: [{ name: 'Preact' }]
+          },
+          {
+
+            name: 'Vue',
+            children: [{ name: 'Moon' }]
+          }
+        ]
+    }
+  }
+}
+</script>
+```
diff --git a/docs/zh-cn/panzoom.md b/docs/zh-cn/panzoom.md
@@ -0,0 +1,31 @@
+## 缩放组织树图
+
+
+```html
+/*vue*/
+<template>
+  <vo-basic :data="chartData" :pan=true :zoom=true></vo-basic>
+</template>
+
+<script>
+export default {
+  created() {
+    this.chartData = {
+      name: 'JavaScript',
+        children: [
+          { name: 'Angular' },
+          {
+            name: 'React',
+            children: [{ name: 'Preact' }]
+          },
+          {
+
+            name: 'Vue',
+            children: [{ name: 'Moon' }]
+          }
+        ]
+    }
+  }
+}
+</script>
+```