docs: prettier all markdown files
This commit is contained in:
chenjiahan
neverland
+39
-37
@@ -27,10 +27,10 @@ export default {
|
||||
return {
|
||||
items,
|
||||
activeId: 1,
|
||||
activeIndex: 0
|
||||
activeIndex: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Multiple Mode
|
||||
@@ -49,23 +49,25 @@ export default {
|
||||
return {
|
||||
items,
|
||||
activeIds: [1, 2],
|
||||
activeIndex: 0
|
||||
activeIndex: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Content
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
height="55vw"
|
||||
:items="items"
|
||||
:main-active-index.sync="active"
|
||||
>
|
||||
<van-tree-select height="55vw" :items="items" :main-active-index.sync="active">
|
||||
<template #content>
|
||||
<van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
<van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
<van-image
|
||||
v-if="active === 0"
|
||||
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
||||
/>
|
||||
<van-image
|
||||
v-if="active === 1"
|
||||
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
||||
/>
|
||||
</template>
|
||||
</van-tree-select>
|
||||
```
|
||||
@@ -75,10 +77,10 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
items: [{ text: 'Group 1' }, { text: 'Group 2' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
items: [{ text: 'Group 1' }, { text: 'Group 2' }],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Show Badge
|
||||
@@ -98,11 +100,11 @@ export default {
|
||||
activeIndex: 0,
|
||||
items: [
|
||||
{ text: 'Group 1', children: [], dot: true },
|
||||
{ text: 'Group 2', children: [], badge: 5 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
{ text: 'Group 2', children: [], badge: 5 },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
@@ -110,24 +112,24 @@ export default {
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| items | Required datasets for the component | *Item[]* | `[]` |
|
||||
| height | Height | *number \| string* | `300` |
|
||||
| main-active-index | The index of selected parent node | *number \| string* | `0` |
|
||||
| active-id | Id of selected item | *number \| string \|<br>(number \| string)[]* | `0` |
|
||||
| max `v2.2.0` | Maximum number of selected items | *number \| string* | `Infinity` |
|
||||
| --- | --- | --- | --- |
|
||||
| items | Required datasets for the component | _Item[]_ | `[]` |
|
||||
| height | Height | _number \| string_ | `300` |
|
||||
| main-active-index | The index of selected parent node | _number \| string_ | `0` |
|
||||
| active-id | Id of selected item | _number \| string \|<br>(number \| string)[]_ | `0` |
|
||||
| max `v2.2.0` | Maximum number of selected items | _number \| string_ | `Infinity` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| --- | --- | --- |
|
||||
| click-nav | triggered when parent node is selected | index: index of selected parent |
|
||||
| click-item | triggered when item is selected | data: selected item |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| Name | Description |
|
||||
| ------- | -------------------- |
|
||||
| content | Custom right content |
|
||||
|
||||
### Data Structure of Item
|
||||
@@ -155,13 +157,13 @@ In every tree object, `text` property defines `id` stands for the unique key whi
|
||||
// id of the leaf node, component highlights leaf node by comparing the activeId with this.
|
||||
id: 1,
|
||||
// disable options
|
||||
disabled: true
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
text: 'Baltimore',
|
||||
id: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
id: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
@@ -29,10 +29,10 @@ export default {
|
||||
return {
|
||||
items,
|
||||
activeId: 1,
|
||||
activeIndex: 0
|
||||
activeIndex: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 多选模式
|
||||
@@ -53,10 +53,10 @@ export default {
|
||||
return {
|
||||
items,
|
||||
activeIds: [1, 2],
|
||||
activeIndex: 0
|
||||
activeIndex: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义内容
|
||||
@@ -64,14 +64,16 @@ export default {
|
||||
通过`content`插槽可以自定义右侧区域的内容
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
height="55vw"
|
||||
:items="items"
|
||||
:main-active-index.sync="active"
|
||||
>
|
||||
<van-tree-select height="55vw" :items="items" :main-active-index.sync="active">
|
||||
<template #content>
|
||||
<van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
<van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
<van-image
|
||||
v-if="active === 0"
|
||||
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
||||
/>
|
||||
<van-image
|
||||
v-if="active === 1"
|
||||
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
||||
/>
|
||||
</template>
|
||||
</van-tree-select>
|
||||
```
|
||||
@@ -81,10 +83,10 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
items: [{ text: '分组 1' }, { text: '分组 2' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
items: [{ text: '分组 1' }, { text: '分组 2' }],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 徽标提示
|
||||
@@ -106,11 +108,11 @@ export default {
|
||||
activeIndex: 0,
|
||||
items: [
|
||||
{ text: '浙江', children: [], dot: true },
|
||||
{ text: '江苏', children: [], badge: 5 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
{ text: '江苏', children: [], badge: 5 },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
@@ -118,24 +120,24 @@ export default {
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| items | 分类显示所需的数据 | *Item[]* | `[]` |
|
||||
| height | 高度，默认单位为`px` | *number \| string* | `300` |
|
||||
| main-active-index | 左侧选中项的索引 | *number \| string* | `0` |
|
||||
| active-id | 右侧选中项的 id，支持传入数组 | *number \| string \|<br>(number \| string)[]* | `0` |
|
||||
| max `v2.2.0` | 右侧项最大选中个数 | *number \| string* | `Infinity` |
|
||||
| --- | --- | --- | --- |
|
||||
| items | 分类显示所需的数据 | _Item[]_ | `[]` |
|
||||
| height | 高度，默认单位为`px` | _number \| string_ | `300` |
|
||||
| main-active-index | 左侧选中项的索引 | _number \| string_ | `0` |
|
||||
| active-id | 右侧选中项的 id，支持传入数组 | _number \| string \|<br>(number \| string)[]_ | `0` |
|
||||
| max `v2.2.0` | 右侧项最大选中个数 | _number \| string_ | `Infinity` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click-nav | 点击左侧导航时触发 | index：被点击的导航的索引 |
|
||||
| click-item | 点击右侧选择项时触发 | data: 该点击项的数据 |
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ---------- | -------------------- | ------------------------- |
|
||||
| click-nav | 点击左侧导航时触发 | index：被点击的导航的索引 |
|
||||
| click-item | 点击右侧选择项时触发 | data: 该点击项的数据 |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| 名称 | 说明 |
|
||||
| ------- | ------------------ |
|
||||
| content | 自定义右侧区域内容 |
|
||||
|
||||
### Item 数据结构
|
||||
@@ -161,13 +163,13 @@ export default {
|
||||
// id，作为匹配选中状态的标识符
|
||||
id: 1,
|
||||
// 禁用选项
|
||||
disabled: true
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
text: '杭州',
|
||||
id: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
id: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user