Startsida Utforska Hjälp
Registrera dig Logga in
vuejs
/
vue
spegling av https://github.com/vuejs/vue.git
2
0
Fork 0
Filer Ärenden 0 Wiki
Bläddra i källkod

add tree example

Evan You 11 år sedan
förälder
12ecbf7954
incheckning
1057d7359d
2 ändrade filer med 132 tillägg och 0 borttagningar
Unifierad Vy Visa Diff Statistik
  1. 51 0
      examples/tree/index.html
  2. 81 0
      examples/tree/tree.js

+ 51 - 0
examples/tree/index.html
Visa fil 

@@ -0,0 +1,51 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>Vue.js tree-view demo</title>
 
+    <style>
 
+      body {
 
+        font-family: monospace;
 
+      }
 
+      .item {
 
+        cursor: pointer;
 
+      }
 
+      ul {
 
+        padding-left: 1em;
 
+        list-style-type: dot;
 
+      }
 
+    </style>
 
+    <script src="../../dist/vue.js"></script>
 
+  </head>
 
+  <body>
 
+
 
+    <!-- item template -->
 
+    <script type="text/x-template" id="item-template">
 
+      <div v-style="color: isFolder ? '#333' : '#999'"
 
+        v-on="click: toggle, dblclick: changeType">
 
+        {{model.name}}
 
+        <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
 
+      </div>
 
+      <ul v-show="open" v-if="isFolder">
 
+        <li class="item"
 
+          v-repeat="model: model.children | sortByChildren"
 
+          v-component="item">
 
+        </li>
 
+        <li v-on="click: addChild">+</li>
 
+      </ul>
 
+    </script>
 
+
 
+    <p>(You can double click on an item to turn it into a folder.)</p>
 
+
 
+    <!-- the demo root element -->
 
+    <ul id="demo">
 
+      <li class="item"
 
+        v-component="item"
 
+        v-with="model: treeData">
 
+      </li>
 
+    </ul>
 
+
 
+    <!-- demo code -->
 
+    <script src="tree.js"></script>
 
+  </body>
 
+</html>

+ 81 - 0
examples/tree/tree.js
Visa fil 

@@ -0,0 +1,81 @@
 
+// demo data
 
+var data = {
 
+  name: 'My Tree',
 
+  children: [
 
+    { name: 'hello' },
 
+    { name: 'wat' },
 
+    {
 
+      name: 'child folder',
 
+      children: [
 
+        {
 
+          name: 'child folder',
 
+          children: [
 
+            { name: 'hello' },
 
+            { name: 'wat' }
 
+          ]
 
+        },
 
+        { name: 'hello' },
 
+        { name: 'wat' },
 
+        {
 
+          name: 'child folder',
 
+          children: [
 
+            { name: 'hello' },
 
+            { name: 'wat' }
 
+          ]
 
+        }
 
+      ]
 
+    }
 
+  ]
 
+}
 
+
 
+// define the item component
 
+Vue.component('item', {
 
+  template: '#item-template',
 
+  data: function () {
 
+    return {
 
+      open: false
 
+    }
 
+  },
 
+  computed: {
 
+    isFolder: function () {
 
+      return this.model.children &&
 
+        this.model.children.length
 
+    }
 
+  },
 
+  filters: {
 
+    sortByChildren: function (list) {
 
+      return list.slice().sort(function (a, b) {
 
+        var alen = a.children ? 1 : 0
 
+        var blen = b.children ? 1 : 0
 
+        return alen > blen ? 1 : -1
 
+      })
 
+    }
 
+  },
 
+  methods: {
 
+    toggle: function () {
 
+      if (this.isFolder) {
 
+        this.open = !this.open
 
+      }
 
+    },
 
+    changeType: function () {
 
+      if (!this.isFolder) {
 
+        this.model.$add('children', [])
 
+        this.addChild()
 
+        this.open = true
 
+      }
 
+    },
 
+    addChild: function () {
 
+      this.model.children.push({
 
+        name: 'new stuff'
 
+      })
 
+    }
 
+  }
 
+})
 
+
 
+// boot up the demo
 
+var demo = new Vue({
 
+  el: '#demo',
 
+  data: {
 
+    treeData: data
 
+  }
 
+})