mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(TreeSelect): add custom content demo (#4272)
This commit is contained in:
neverland
GitHub
parent
ac193fef3c
commit
9c68de0d88
@ -17,7 +17,7 @@ Vue.use(TreeSelect);
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:active-id.sync="activeId"
|
||||
:main-active-index.sync="mainActiveIndex"
|
||||
:main-active-index.sync="activeIndex"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -27,7 +27,7 @@ export default {
|
||||
return {
|
||||
items,
|
||||
activeId: 1,
|
||||
mainActiveIndex: 0
|
||||
activeIndex: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:active-id.sync="activeIds"
|
||||
:main-active-index.sync="mainActiveIndex"
|
||||
:main-active-index.sync="activeIndex"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -49,12 +49,44 @@ export default {
|
||||
return {
|
||||
items,
|
||||
activeIds: [1, 2],
|
||||
mainActiveIndex: 0
|
||||
activeIndex: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Content
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
height="55vw"
|
||||
:items="items"
|
||||
:main-active-index.sync="activeIndex"
|
||||
>
|
||||
<template slot="content">
|
||||
<van-image
|
||||
v-if="activeIndex === 0"
|
||||
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
||||
/>
|
||||
<van-image
|
||||
v-if="activeIndex === 1"
|
||||
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
||||
/>
|
||||
</template>
|
||||
</van-tree-select>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0,
|
||||
items: [{ text: 'Group 1' }, { text: 'Group 2' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -89,7 +121,7 @@ In every tree object, `text` property defines `id` stands for the unique key whi
|
||||
[
|
||||
{
|
||||
// name of the parent node
|
||||
text: 'All Cities',
|
||||
text: 'Group 1',
|
||||
// leaves of this parent node
|
||||
children: [
|
||||
{
|
||||
|
||||
@ -19,7 +19,7 @@ Vue.use(TreeSelect);
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:active-id.sync="activeId"
|
||||
:main-active-index.sync="mainActiveIndex"
|
||||
:main-active-index.sync="activeIndex"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -29,7 +29,7 @@ export default {
|
||||
return {
|
||||
items,
|
||||
activeId: 1,
|
||||
mainActiveIndex: 0
|
||||
activeIndex: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:active-id.sync="activeIds"
|
||||
:main-active-index.sync="mainActiveIndex"
|
||||
:main-active-index.sync="activeIndex"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -53,12 +53,46 @@ export default {
|
||||
return {
|
||||
items,
|
||||
activeIds: [1, 2],
|
||||
mainActiveIndex: 0
|
||||
activeIndex: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义内容
|
||||
|
||||
通过`content`插槽可以自定义右侧区域的内容
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
height="55vw"
|
||||
:items="items"
|
||||
:main-active-index.sync="activeIndex"
|
||||
>
|
||||
<template slot="content">
|
||||
<van-image
|
||||
v-if="activeIndex === 0"
|
||||
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
||||
/>
|
||||
<van-image
|
||||
v-if="activeIndex === 1"
|
||||
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
||||
/>
|
||||
</template>
|
||||
</van-tree-select>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0,
|
||||
items: [{ text: '分组 1' }, { text: '分组 2' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
66
src/tree-select/demo/data.en-US.ts
Normal file
66
src/tree-select/demo/data.en-US.ts
Normal file
@ -0,0 +1,66 @@
|
||||
const group1 = [
|
||||
{
|
||||
text: 'Delaware',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: 'Florida',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
text: 'Georqia',
|
||||
id: 3,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: 'Indiana',
|
||||
id: 4
|
||||
}
|
||||
];
|
||||
|
||||
const group2 = [
|
||||
{
|
||||
text: 'Alabama',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
text: 'Kansas',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
text: 'Louisiana',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
text: 'Texas',
|
||||
id: 8
|
||||
}
|
||||
];
|
||||
|
||||
const group3 = [
|
||||
{
|
||||
text: 'Alabama',
|
||||
id: 9
|
||||
},
|
||||
{
|
||||
text: 'Kansas',
|
||||
id: 10
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
export const enUSData = [
|
||||
{
|
||||
text: 'Group 1',
|
||||
children: group1
|
||||
},
|
||||
{
|
||||
text: 'Group 2',
|
||||
children: group2
|
||||
},
|
||||
{
|
||||
text: 'Group 3',
|
||||
disabled: true,
|
||||
children: group3
|
||||
}
|
||||
];
|
||||
65
src/tree-select/demo/data.zh-CN.ts
Normal file
65
src/tree-select/demo/data.zh-CN.ts
Normal file
@ -0,0 +1,65 @@
|
||||
const zhejiang = [
|
||||
{
|
||||
text: '杭州',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: '温州',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
text: '宁波',
|
||||
id: 3,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '义乌',
|
||||
id: 4
|
||||
}
|
||||
];
|
||||
|
||||
const jiangsu = [
|
||||
{
|
||||
text: '南京',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
text: '无锡',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
text: '徐州',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
text: '苏州',
|
||||
id: 8
|
||||
}
|
||||
];
|
||||
|
||||
const fujian = [
|
||||
{
|
||||
text: '泉州',
|
||||
id: 9
|
||||
},
|
||||
{
|
||||
text: '厦门',
|
||||
id: 10
|
||||
}
|
||||
];
|
||||
|
||||
export const zhCNData = [
|
||||
{
|
||||
text: '浙江',
|
||||
children: zhejiang
|
||||
},
|
||||
{
|
||||
text: '江苏',
|
||||
children: jiangsu
|
||||
},
|
||||
{
|
||||
text: '福建',
|
||||
disabled: true,
|
||||
children: fujian
|
||||
}
|
||||
];
|
||||
@ -4,7 +4,7 @@
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:active-id.sync="activeId"
|
||||
:main-active-index.sync="mainActiveIndex"
|
||||
:main-active-index.sync="activeIndex"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -12,157 +12,61 @@
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:active-id.sync="activeIds"
|
||||
:main-active-index.sync="mainActiveIndex2"
|
||||
:main-active-index.sync="activeIndex2"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customContent')">
|
||||
<van-tree-select height="55vw" :items="simpleItems" :main-active-index.sync="activeIndex3">
|
||||
<template slot="content">
|
||||
<van-image v-if="activeIndex3 === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
<van-image v-if="activeIndex3 === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
</template>
|
||||
</van-tree-select>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { zhCNData } from './data.zh-CN';
|
||||
import { enUSData } from './data.en-US';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
group1: '所有城市',
|
||||
group2: '浙江',
|
||||
group3: '江苏',
|
||||
group4: '福建',
|
||||
radioMode: '单选模式',
|
||||
multipleMode: '多选模式',
|
||||
city1: [
|
||||
{
|
||||
text: '杭州',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: '温州',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
text: '宁波',
|
||||
id: 3,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '义乌',
|
||||
id: 4
|
||||
}
|
||||
],
|
||||
city2: [
|
||||
{
|
||||
text: '南京',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
text: '无锡',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
text: '徐州',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
text: '苏州',
|
||||
id: 8
|
||||
}
|
||||
],
|
||||
city3: [
|
||||
{
|
||||
text: '泉州',
|
||||
id: 9
|
||||
},
|
||||
{
|
||||
text: '厦门',
|
||||
id: 10
|
||||
}
|
||||
]
|
||||
customContent: '自定义内容',
|
||||
data: zhCNData,
|
||||
dataSimple: [{ text: '分组 1' }, { text: '分组 2' }]
|
||||
},
|
||||
'en-US': {
|
||||
group1: 'All',
|
||||
group2: 'Group1',
|
||||
group3: 'Group2',
|
||||
group4: 'Group3',
|
||||
radioMode: 'Radio Mode',
|
||||
multipleMode: 'Multiple Mode',
|
||||
city1: [
|
||||
{
|
||||
text: 'Delaware',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: 'Florida',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
text: 'Georqia',
|
||||
id: 3,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: 'Indiana',
|
||||
id: 4
|
||||
}
|
||||
],
|
||||
city2: [
|
||||
{
|
||||
text: 'Alabama',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
text: 'Kansas',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
text: 'Louisiana',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
text: 'Texas',
|
||||
id: 8
|
||||
}
|
||||
],
|
||||
city3: [
|
||||
{
|
||||
text: 'Alabama',
|
||||
id: 9
|
||||
},
|
||||
{
|
||||
text: 'Kansas',
|
||||
id: 10
|
||||
}
|
||||
]
|
||||
customContent: 'Custom Content',
|
||||
data: enUSData,
|
||||
dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeId: 1,
|
||||
activeId2: 1,
|
||||
activeIds: [1, 2],
|
||||
mainActiveIndex: 0,
|
||||
mainActiveIndex2: 0
|
||||
activeIndex: 0,
|
||||
activeIndex2: 0,
|
||||
activeIndex3: 0
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
items() {
|
||||
return [
|
||||
{
|
||||
text: this.$t('group1'),
|
||||
children: [...this.$t('city1'), ...this.$t('city2')]
|
||||
},
|
||||
{
|
||||
text: this.$t('group2'),
|
||||
children: this.$t('city1')
|
||||
},
|
||||
{
|
||||
text: this.$t('group3'),
|
||||
children: this.$t('city2')
|
||||
},
|
||||
{
|
||||
text: this.$t('group4'),
|
||||
disabled: true,
|
||||
children: this.$t('city3')
|
||||
}
|
||||
];
|
||||
return this.$t('data');
|
||||
},
|
||||
|
||||
simpleItems() {
|
||||
return this.$t('dataSimple');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -5,8 +5,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-tree-select" style="height: 300px;">
|
||||
<div class="van-tree-select__nav">
|
||||
<div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">所有城市</div>
|
||||
<div class="van-ellipsis van-tree-select__nav-item">浙江</div>
|
||||
<div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">浙江</div>
|
||||
<div class="van-ellipsis van-tree-select__nav-item">江苏</div>
|
||||
<div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--disabled">福建</div>
|
||||
</div>
|
||||
@ -16,18 +15,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-ellipsis van-tree-select__item">温州</div>
|
||||
<div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
|
||||
<div class="van-ellipsis van-tree-select__item">义乌</div>
|
||||
<div class="van-ellipsis van-tree-select__item">南京</div>
|
||||
<div class="van-ellipsis van-tree-select__item">无锡</div>
|
||||
<div class="van-ellipsis van-tree-select__item">徐州</div>
|
||||
<div class="van-ellipsis van-tree-select__item">苏州</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tree-select" style="height: 300px;">
|
||||
<div class="van-tree-select__nav">
|
||||
<div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">所有城市</div>
|
||||
<div class="van-ellipsis van-tree-select__nav-item">浙江</div>
|
||||
<div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">浙江</div>
|
||||
<div class="van-ellipsis van-tree-select__nav-item">江苏</div>
|
||||
<div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--disabled">福建</div>
|
||||
</div>
|
||||
@ -38,10 +32,21 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i></div>
|
||||
<div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
|
||||
<div class="van-ellipsis van-tree-select__item">义乌</div>
|
||||
<div class="van-ellipsis van-tree-select__item">南京</div>
|
||||
<div class="van-ellipsis van-tree-select__item">无锡</div>
|
||||
<div class="van-ellipsis van-tree-select__item">徐州</div>
|
||||
<div class="van-ellipsis van-tree-select__item">苏州</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tree-select" style="height: 55vw;">
|
||||
<div class="van-tree-select__nav">
|
||||
<div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">分组 1</div>
|
||||
<div class="van-ellipsis van-tree-select__nav-item">分组 2</div>
|
||||
</div>
|
||||
<div class="van-tree-select__content">
|
||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user