[Doc] rename component README file (#3662)

2019-06-27 14:22:40 +08:00
parent a56f96c246
commit ddb24e6762
119 changed files with 4 additions and 3 deletions
@@ -0,0 +1,93 @@
+# TreeSelect
+
+### Install
+
+``` javascript
+import { TreeSelect } from 'vant';
+
+Vue.use(TreeSelect);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-tree-select
+  :items="items"
+  :main-active-index="mainActiveIndex"
+  :active-id="activeId"
+  @navclick="onNavClick"
+  @itemclick="onItemClick"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      items,
+      // the index of parent item
+      mainActiveIndex: 0,
+      // the id of selected item
+      activeId: 1001
+    };
+  },
+  methods: {
+    onNavClick(index) {
+      this.mainActiveIndex = index;
+    },
+    onItemClick(data) {
+      this.activeId = data.id;
+    }
+  }
+}
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| items | Required datasets for the component, see Data Structure for detail. | `Array` | `[]` |
+| height | Height (px) | `Number` | `300` |
+| main-Active-index | The index of selected parent node | `Number` | `0` |
+| active-id | Id of selected item | `String | Number` | `0` |
+
+### Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| navclick | triggered when parent node is selected |  index: index of selected parent |
+| itemclick | triggered when item is selected | data: selected item |
+
+### Data Structure
+
+`items` should be an array contains specified tree objects.
+
+In every tree object, `text` property defines `id` stands for the unique key while the `children` contains sub-tree objects.
+
+```javascript
+[
+  {
+    // name of the parent node
+    text: 'All Cities',
+    // leaves of this parent node
+    children: [
+      {
+        // name of the leaf node
+        text: 'Washington',
+        // id of the leaf node, component highlights leaf node by comparing the activeId with this.
+        id: 1,
+        // disable options
+        disabled: true
+      },
+      {
+        text: 'Baltimore',
+        id: 2
+      }
+    ]
+  }
+]
+```