blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(TreeSelect): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-13 14:02:16 +08:00
parent 5582f8a583
commit 668a7fbf5f
3 changed files with 172 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/tree-select/README.md
View File

@ -16,19 +16,41 @@ app.use(TreeSelect);
```html
<van-tree-select
v-model:active-id="activeId"
v-model:main-active-index="activeIndex"
v-model:active-id="state.activeId"
v-model:main-active-index="state.activeIndex"
:items="items"
/>
```
```js
import { reactive } from 'vue';
export default {
data() {
return {
items,
setup() {
const state = reactive({
activeId: 1,
activeIndex: 0,
});
const items = [
{
text: 'Group 1',
children: [
{ text: 'Delaware', id: 1 },
{ text: 'Florida', id: 2 },
],
},
{
text: 'Group 2',
children: [
{ text: 'Alabama', id: 5 },
{ text: 'Kansas', id: 6 },
],
},
];
return {
state,
items,
};
},
};
@ -38,19 +60,41 @@ export default {
```html
<van-tree-select
v-model:active-id="activeIds"
v-model:main-active-index="activeIndex"
v-model:active-id="state.activeIds"
v-model:main-active-index="state.activeIndex"
:items="items"
/>
```
```js
import { reactive } from 'vue';
export default {
data() {
return {
items,
activeIds: [1, 2],
setup() {
const state = reactive({
activeId: [1, 2],
activeIndex: 0,
});
const items = [
{
text: 'Group 1',
children: [
{ text: 'Delaware', id: 1 },
{ text: 'Florida', id: 2 },
],
},
{
text: 'Group 2',
children: [
{ text: 'Alabama', id: 5 },
{ text: 'Kansas', id: 6 },
],
},
];
return {
state,
items,
};
},
};
@ -60,17 +104,17 @@ export default {
```html
<van-tree-select
v-model:main-active-index="active"
v-model:main-active-index="activeIndex"
height="55vw"
:items="items"
>
<template #content>
<van-image
v-if="active === 0"
v-if="activeIndex === 0"
src="https://img.yzcdn.cn/vant/apple-1.jpg"
/>
<van-image
v-if="active === 1"
v-if="activeIndex === 1"
src="https://img.yzcdn.cn/vant/apple-2.jpg"
/>
</template>
@ -78,10 +122,13 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
setup() {
const activeIndex = ref(0);
return {
active: 0,
activeIndex,
items: [{ text: 'Group 1' }, { text: 'Group 2' }],
};
},
@ -99,10 +146,13 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
const activeIndex = ref(0);
return {
activeIndex: 0,
activeIndex,
items: [
{ text: 'Group 1', children: [], dot: true },
{ text: 'Group 2', children: [], badge: 5 },

84
src/tree-select/README.zh-CN.md
View File

@ -18,19 +18,41 @@ app.use(TreeSelect);
```html
<van-tree-select
v-model:active-id="activeId"
v-model:main-active-index="activeIndex"
v-model:active-id="state.activeId"
v-model:main-active-index="state.activeIndex"
:items="items"
/>
```
```js
import { reactive } from 'vue';
export default {
data() {
return {
items,
setup() {
const state = reactive({
activeId: 1,
activeIndex: 0,
});
const items = [
{
text: '浙江',
children: [
{ text: '杭州', id: 1 },
{ text: '温州', id: 2 },
],
},
{
text: '江苏',
children: [
{ text: '南京', id: 5 },
{ text: '无锡', id: 6 },
],
},
];
return {
state,
items,
};
},
};
@ -42,19 +64,41 @@ export default {
```html
<van-tree-select
v-model:active-id="activeIds"
v-model:main-active-index="activeIndex"
v-model:active-id="state.activeIds"
v-model:main-active-index="state.activeIndex"
:items="items"
/>
```
```js
import { reactive } from 'vue';
export default {
data() {
return {
items,
activeIds: [1, 2],
setup() {
const state = reactive({
activeId: [1, 2],
activeIndex: 0,
});
const items = [
{
text: '浙江',
children: [
{ text: '杭州', id: 1 },
{ text: '温州', id: 2 },
],
},
{
text: '江苏',
children: [
{ text: '南京', id: 5 },
{ text: '无锡', id: 6 },
],
},
];
return {
state,
items,
};
},
};
@ -66,17 +110,17 @@ export default {
```html
<van-tree-select
v-model:main-active-index="active"
v-model:main-active-index="activeIndex"
height="55vw"
:items="items"
>
<template #content>
<van-image
v-if="active === 0"
v-if="activeIndex === 0"
src="https://img.yzcdn.cn/vant/apple-1.jpg"
/>
<van-image
v-if="active === 1"
v-if="activeIndex === 1"
src="https://img.yzcdn.cn/vant/apple-2.jpg"
/>
</template>
@ -84,10 +128,13 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
setup() {
const activeIndex = ref(0);
return {
active: 0,
activeIndex,
items: [{ text: '分组 1' }, { text: '分组 2' }],
};
},
@ -107,10 +154,13 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
const activeIndex = ref(0);
return {
activeIndex: 0,
activeIndex,
items: [
{ text: '浙江', children: [], dot: true },
{ text: '江苏', children: [], badge: 5 },

73
src/tree-select/demo/index.vue
View File

@ -46,33 +46,36 @@
</demo-block>
</template>
<script>
<script lang="ts">
import { computed, reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { zhCNData } from './data-zh';
import { enUSData } from './data-en';
import { deepClone } from '../../utils/deep-clone';
export default {
i18n: {
'zh-CN': {
showBadge: '徽标提示',
radioMode: '单选模式',
multipleMode: '多选模式',
customContent: '自定义内容',
data: zhCNData,
dataSimple: [{ text: '分组 1' }, { text: '分组 2' }],
},
'en-US': {
showBadge: 'Show Badge',
radioMode: 'Radio Mode',
multipleMode: 'Multiple Mode',
customContent: 'Custom Content',
data: enUSData,
dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
},
const i18n = {
'zh-CN': {
showBadge: '徽标提示',
radioMode: '单选模式',
multipleMode: '多选模式',
customContent: '自定义内容',
data: zhCNData,
dataSimple: [{ text: '分组 1' }, { text: '分组 2' }],
},
'en-US': {
showBadge: 'Show Badge',
radioMode: 'Radio Mode',
multipleMode: 'Multiple Mode',
customContent: 'Custom Content',
data: enUSData,
dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
},
};
data() {
return {
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
activeId: 1,
activeId2: 1,
activeIds: [1, 2],
@ -80,26 +83,26 @@ export default {
activeIndex2: 0,
activeIndex3: 0,
activeIndex4: 0,
};
},
});
computed: {
items() {
return this.t('data');
},
const items = computed(() => t('data'));
simpleItems() {
return this.t('dataSimple');
},
badgeItems() {
const data = deepClone(this.t('data')).slice(0, 2);
const simpleItems = computed(() => t('dataSimple'));
const badgeItems = computed(() => {
const data = deepClone(t('data')).slice(0, 2);
data[0].dot = true;
data[1].badge = 5;
return data;
},
});
return {
...toRefs(state),
t,
items,
badgeItems,
simpleItems,
};
},
};
</script>