update

tower1229 · Aug 20, 2019 · e837e5a · e837e5a
1 parent a3bd384
commit e837e5a
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 60 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/Vue-Giant-Tree/favicon.ico><title>vue-giant-tree</title><link href=/Vue-Giant-Tree/js/chunk-37cd830a.dc5cc1ed.js rel=prefetch><link href=/Vue-Giant-Tree/js/app.8ab1a6c2.js rel=preload as=script><link href=/Vue-Giant-Tree/js/chunk-vendors.c60b2b4b.js rel=preload as=script></head><body><noscript><strong>We're sorry but vue-giant-tree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/Vue-Giant-Tree/js/chunk-vendors.c60b2b4b.js></script><script src=/Vue-Giant-Tree/js/app.8ab1a6c2.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/Vue-Giant-Tree/favicon.ico><title>vue-giant-tree</title><link href=/Vue-Giant-Tree/js/chunk-37cd830a.dc5cc1ed.js rel=prefetch><link href=/Vue-Giant-Tree/js/app.e8545e5c.js rel=preload as=script><link href=/Vue-Giant-Tree/js/chunk-vendors.4d26bded.js rel=preload as=script></head><body><noscript><strong>We're sorry but vue-giant-tree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/Vue-Giant-Tree/js/chunk-vendors.4d26bded.js></script><script src=/Vue-Giant-Tree/js/app.e8545e5c.js></script></body></html>
diff --git a/docs/js/app.8ab1a6c2.js.map b/docs/js/app.8ab1a6c2.js.map
diff --git a/docs/js/app.8ab1a6c2.js → docs/js/app.e8545e5c.js b/docs/js/app.8ab1a6c2.js → docs/js/app.e8545e5c.js
diff --git a/docs/js/app.e8545e5c.js.map b/docs/js/app.e8545e5c.js.map
diff --git a/docs/js/chunk-vendors.c60b2b4b.js → docs/js/chunk-vendors.4d26bded.js b/docs/js/chunk-vendors.c60b2b4b.js → docs/js/chunk-vendors.4d26bded.js
diff --git a/docs/js/chunk-vendors.4d26bded.js.map b/docs/js/chunk-vendors.4d26bded.js.map
diff --git a/docs/js/chunk-vendors.c60b2b4b.js.map b/docs/js/chunk-vendors.c60b2b4b.js.map
diff --git a/src/App.vue b/src/App.vue
@@ -1,51 +1,71 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <h1 class="T">Vue-Giant-Tree 
-      <a href="https://github.com/tower1229/Vue-Giant-Tree" target="_blank" titie="Vue-Giant-Tree">
-        <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
+  <div id="app" class="flex-col">
+    <h1 class="T">
+      Vue-Giant-Tree
+      <a
+        href="https://github.com/tower1229/Vue-Giant-Tree"
+        target="_blank"
+        titie="Vue-Giant-Tree"
+      >
+        <svg
+          class="octicon octicon-mark-github v-align-middle"
+          height="32"
+          viewBox="0 0 16 16"
+          version="1.1"
+          width="16"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+          />
+        </svg>
       </a>
     </h1>
-    
-    <div class="wrap">
+
+    <div class="wrap flex-1">
       <div class="c">
-        <tree 
-          :setting="setting" 
-          :nodes="nodes" 
-          @onClick="onClick" 
-          @onCheck="onCheck" 
-          @onCreated="handleCreated" />
+        <tree
+          :setting="setting"
+          :nodes="nodes"
+          @onClick="onClick"
+          @onCheck="onCheck"
+          @onCreated="handleCreated"
+        />
       </div>
     </div>
 
     <div class="toolbar">
       <button class="btn" type="button" @click="update">更新数据</button>
     </div>
 
-    <footer class="foot"><p>© 2019 - 3019  Author
-      <a href="https://refined-x.com/" target="_blank">前端路上</a></p>
+    <footer class="foot">
+      <p>
+        © 2019 - 3019 Author
+        <a href="https://refined-x.com/" target="_blank">前端路上</a>
+      </p>
     </footer>
   </div>
 </template>
 
 <script>
 const bigData = require("@/mock/big-tree.json");
 const simpleData = [
-  { id:1, pid:0, name:"随意勾选 1", open:true},
-  { id:11, pid:1, name:"随意勾选 1-1", open:true},
-  { id:111, pid:11, name:"随意勾选 1-1-1"},
-  { id:112, pid:11, name:"随意勾选 1-1-2"},
-  { id:12, pid:1, name:"随意勾选 1-2", open:true},
-  { id:121, pid:12, name:"随意勾选 1-2-1"},
-  { id:122, pid:12, name:"随意勾选 1-2-2"},
-  { id:2, pid:0, name:"随意勾选 2", checked:true, open:true},
-  { id:21, pid:2, name:"随意勾选 2-1"},
-  { id:22, pid:2, name:"随意勾选 2-2", open:true},
-  { id:221, pid:22, name:"随意勾选 2-2-1", checked:true},
-  { id:222, pid:22, name:"随意勾选 2-2-2"},
-  { id:23, pid:2, name:"随意勾选 2-3"}
+  { id: 1, pid: 0, name: "随意勾选 1", open: true },
+  { id: 11, pid: 1, name: "随意勾选 1-1", open: true },
+  { id: 111, pid: 11, name: "随意勾选 1-1-1" },
+  { id: 112, pid: 11, name: "随意勾选 1-1-2" },
+  { id: 12, pid: 1, name: "随意勾选 1-2", open: true },
+  { id: 121, pid: 12, name: "随意勾选 1-2-1" },
+  { id: 122, pid: 12, name: "随意勾选 1-2-2" },
+  { id: 2, pid: 0, name: "随意勾选 2", checked: true, open: true },
+  { id: 21, pid: 2, name: "随意勾选 2-1" },
+  { id: 22, pid: 2, name: "随意勾选 2-2", open: true },
+  { id: 221, pid: 22, name: "随意勾选 2-2-1", checked: true },
+  { id: 222, pid: 22, name: "随意勾选 2-2-2" },
+  { id: 23, pid: 2, name: "随意勾选 2-3" }
 ];
-const dataQueue = [bigData.data, simpleData]
+const dataQueue = [bigData.data, simpleData];
 
 export default {
   name: "app",
@@ -69,8 +89,8 @@ export default {
     };
   },
   computed: {
-    nodes: function(){
-      return dataQueue[this.showIndex]
+    nodes: function() {
+      return dataQueue[this.showIndex];
     }
   },
   methods: {
@@ -82,11 +102,11 @@ export default {
       // 选中事件
       console.log(evt.type, treeNode);
     },
-    handleCreated: function(ztreeObj){
+    handleCreated: function(ztreeObj) {
       // onCreated 中操作ztreeObj对象展开第一个节点
-      ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
+      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
     },
-    update: function(){
+    update: function() {
       // 更新示例数据
       this.showIndex = this.showIndex === 0 ? 1 : 0;
     }
@@ -95,48 +115,116 @@ export default {
 </script>
 
 <style>
-body{margin:0;}
+html,body{height: 100%;}
+body {
+  margin: 0;
+}
+
+/* flex栅格 */
+.flex-col {
+  overflow: hidden;
+  display: -ms-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-direction: column;
+  -ms-flex-direction: column;
+}
+
+.flex-row {
+  overflow: hidden;
+  display: -ms-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.flex-1 {
+  -ms-flex: 1;
+  flex: 1;
+  min-width: 0;
+}
+
+.flex-2 {
+  -ms-flex: 2;
+  flex: 2;
+  min-width: 0;
+}
+
+.flex-3 {
+  -ms-flex: 3;
+  flex: 3;
+  min-width: 0;
+}
+
+.flex-4 {
+  -ms-flex: 4;
+  flex: 4;
+  min-width: 0;
+}
+
+.align-stretch {
+  -ms-align-items: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.align-center {
+  -ms-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.justify-center {
+  -ms-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 #app {
+  height: 100%;
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
 }
-.wrap {
-  text-align: center;
+.wrap{
+  overflow: hidden;
 }
 .c {
-  display: inline-block;
   width: 600px;
-  height: 400px;
+  height: 100%;
   overflow: auto;
-  margin: 0 10px;
+  margin: auto;
 }
-.T{
+.T {
   font-size: 34px;
-  margin-bottom: 44px;
+  margin: 0 0 30px;
+  height: 170px;
+  line-height: 260px;
+  overflow: hidden;
+  background:url(./assets/logo.png) center no-repeat;
 }
-.toolbar{
+.toolbar {
   margin: 20px auto;
 }
-.toolbar .btn{
-  padding: .5em 1em;
+.toolbar .btn {
+  padding: 0.5em 1em;
   outline: none;
   border-radius: 4px;
 }
 
 .foot {
-    background: #333;
-    padding: 24px;
-    overflow: hidden;
-    color: #999;
-    font-size: 14px;
-    text-align: center
+  margin-top: 30px;
+  background: #333;
+  padding: 24px;
+  overflow: hidden;
+  color: #999;
+  font-size: 14px;
+  text-align: center;
 }
 
 .foot a {
-    color: #fff;
-    margin: 0 .5em
+  color: #fff;
+  margin: 0 0.5em;
 }
 </style>