blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-10 14:39:45 +08:00
Code Issues Projects Releases Wiki Activity

docs(Cascader): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-21 22:32:17 +08:00
parent 9f758b981f
commit 4d6b1d2875
2 changed files with 122 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/cascader/README.md
View File

@ -16,49 +16,56 @@ app.use(Cascader);
```html ```html
<van-field <van-field
v-model="fieldValue" v-model="state.fieldValue"
is-link is-link
readonly readonly
label="Area" label="Area"
placeholder="Select Area" placeholder="Select Area"
@click="show = true" @click="state.show = true"
/> />
<van-popup v-model="show" round position="bottom"> <van-popup v-model="state.show" round position="bottom">
<van-cascader <van-cascader
v-model="cascaderValue" v-model="state.cascaderValue"
title="Select Area" title="Select Area"
@close="show = false" :options="options"
@close="state.show = false"
@finish="onFinish" @finish="onFinish"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
show: false, show: false,
fieldValue: '', fieldValue: '',
cascaderValue: '', cascaderValue: '',
options: [ });
{ const options = [
text: 'Zhejiang', {
value: '330000', text: 'Zhejiang',
children: [{ text: 'Hangzhou', value: '330100' }], value: '330000',
}, children: [{ text: 'Hangzhou', value: '330100' }],
{ },
text: 'Jiangsu', {
value: '320000', text: 'Jiangsu',
children: [{ text: 'Nanjing', value: '320100' }], value: '320000',
}, children: [{ text: 'Nanjing', value: '320100' }],
], },
];
const onFinish = ({ selectedOptions }) => {
state.show = false;
state.fieldValue = selectedOptions.map((option) => option.text).join('/');
};
return {
state,
options,
onFinish,
}; };
},
methods: {
onFinish({ selectedOptions }) {
this.show = false;
this.fieldValue = selectedOptions.map((option) => option.text).join('/');
},
}, },
}; };
``` ```
@ -67,10 +74,11 @@ export default {
```html ```html
<van-cascader <van-cascader
v-model="cascaderValue" v-model="state.cascaderValue"
title="Select Area" title="Select Area"
:options="options"
active-color="#1989fa" active-color="#1989fa"
@close="show = false" @close="state.show = false"
@finish="onFinish" @finish="onFinish"
/> />
``` ```
@ -79,18 +87,19 @@ export default {
```html ```html
<van-field <van-field
v-model="fieldValue" v-model="state.fieldValue"
is-link is-link
readonly readonly
label="Area" label="Area"
placeholder="Select Area" placeholder="Select Area"
@click="show = true" @click="state.show = true"
/> />
<van-popup v-model="show" round position="bottom"> <van-popup v-model="state.show" round position="bottom">
<van-cascader <van-cascader
v-model="cascaderValue" v-model="state.cascaderValue"
title="Select Area" title="Select Area"
@close="show = false" :options="state.options"
@close="state.show = false"
@change="onChange" @change="onChange"
@finish="onFinish" @finish="onFinish"
/> />
@ -98,9 +107,11 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
show: false, show: false,
fieldValue: '', fieldValue: '',
cascaderValue: '', cascaderValue: '',
@ -111,23 +122,27 @@ export default {
children: [], children: [],
}, },
], ],
}; });
}, const onChange = ({ value }) => {
methods: { if (value === state.options[0].value) {
onChange({ value }) {
if (value === this.options[0].value) {
setTimeout(() => { setTimeout(() => {
this.options[0].children = [ state.options[0].children = [
{ text: 'Hangzhou', value: '330100' }, { text: 'Hangzhou', value: '330100' },
{ text: 'Ningbo', value: '330200' }, { text: 'Ningbo', value: '330200' },
]; ];
}, 500); }, 500);
} }
}, };
onFinish({ selectedOptions }) { const onFinish = ({ selectedOptions }) => {
this.show = false; state.show = false;
this.fieldValue = selectedOptions.map((option) => option.text).join('/'); state.fieldValue = selectedOptions.map((option) => option.text).join('/');
}, };
return {
state,
onChange,
onFinish,
};
}, },
}; };
``` ```

109
src/cascader/README.zh-CN.md
View File

@ -22,51 +22,58 @@ app.use(Cascader);
```html ```html
<van-field <van-field
v-model="fieldValue" v-model="state.fieldValue"
is-link is-link
readonly readonly
label="地区" label="地区"
placeholder="请选择所在地区" placeholder="请选择所在地区"
@click="show = true" @click="state.show = true"
/> />
<van-popup v-model:show="show" round position="bottom"> <van-popup v-model:show="state.show" round position="bottom">
<van-cascader <van-cascader
v-model="cascaderValue" v-model="state.cascaderValue"
title="请选择所在地区" title="请选择所在地区"
@close="show = false" :options="options"
@close="state.show = false"
@finish="onFinish" @finish="onFinish"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
show: false, show: false,
fieldValue: '', fieldValue: '',
cascaderValue: '', cascaderValue: '',
// 选项列表，children 代表子选项，支持多级嵌套 });
options: [ // 选项列表，children 代表子选项，支持多级嵌套
{ const options = [
text: '浙江省', {
value: '330000', text: '浙江省',
children: [{ text: '杭州市', value: '330100' }], value: '330000',
}, children: [{ text: '杭州市', value: '330100' }],
{ },
text: '江苏省', {
value: '320000', text: '江苏省',
children: [{ text: '南京市', value: '320100' }], value: '320000',
}, children: [{ text: '南京市', value: '320100' }],
], },
}; ];
},
methods: {
// 全部选项选择完毕后，会触发 finish 事件 // 全部选项选择完毕后，会触发 finish 事件
onFinish({ selectedOptions }) { const onFinish = ({ selectedOptions }) => {
this.show = false; state.show = false;
this.fieldValue = selectedOptions.map((option) => option.text).join('/'); state.fieldValue = selectedOptions.map((option) => option.text).join('/');
}, };
return {
state,
options,
onFinish,
};
}, },
}; };
``` ```
@ -77,10 +84,11 @@ export default {
```html ```html
<van-cascader <van-cascader
v-model="cascaderValue" v-model="state.cascaderValue"
title="请选择所在地区" title="请选择所在地区"
:options="options"
active-color="#1989fa" active-color="#1989fa"
@close="show = false" @close="state.show = false"
@finish="onFinish" @finish="onFinish"
/> />
``` ```
@ -91,18 +99,19 @@ export default {
```html ```html
<van-field <van-field
v-model="fieldValue" v-model="state.fieldValue"
is-link is-link
readonly readonly
label="地区" label="地区"
placeholder="请选择所在地区" placeholder="请选择所在地区"
@click="show = true" @click="state.show = true"
/> />
<van-popup v-model:show="show" round position="bottom"> <van-popup v-model:show="state.show" round position="bottom">
<van-cascader <van-cascader
v-model="cascaderValue" v-model="state.cascaderValue"
title="请选择所在地区" title="请选择所在地区"
@close="show = false" :options="state.options"
@close="state.show = false"
@change="onChange" @change="onChange"
@finish="onFinish" @finish="onFinish"
/> />
@ -110,9 +119,11 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
show: false, show: false,
fieldValue: '', fieldValue: '',
cascaderValue: '', cascaderValue: '',
@ -123,23 +134,27 @@ export default {
children: [], children: [],
}, },
], ],
}; });
}, const onChange = ({ value }) => {
methods: { if (value === state.options[0].value) {
onChange({ value }) {
if (value === this.options[0].value) {
setTimeout(() => { setTimeout(() => {
this.options[0].children = [ state.options[0].children = [
{ text: '杭州市', value: '330100' }, { text: '杭州市', value: '330100' },
{ text: '宁波市', value: '330200' }, { text: '宁波市', value: '330200' },
]; ];
}, 500); }, 500);
} }
}, };
onFinish({ selectedOptions }) { const onFinish = ({ selectedOptions }) => {
this.show = false; state.show = false;
this.fieldValue = selectedOptions.map((option) => option.text).join('/'); state.fieldValue = selectedOptions.map((option) => option.text).join('/');
}, };
return {
state,
onChange,
onFinish,
};
}, },
}; };
``` ```