mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Cascader): use composition api
This commit is contained in:
chenjiahan
parent
9f758b981f
commit
4d6b1d2875
@ -16,49 +16,56 @@ app.use(Cascader);
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="fieldValue"
|
||||
v-model="state.fieldValue"
|
||||
is-link
|
||||
readonly
|
||||
label="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
|
||||
v-model="cascaderValue"
|
||||
v-model="state.cascaderValue"
|
||||
title="Select Area"
|
||||
@close="show = false"
|
||||
:options="options"
|
||||
@close="state.show = false"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
fieldValue: '',
|
||||
cascaderValue: '',
|
||||
options: [
|
||||
{
|
||||
text: 'Zhejiang',
|
||||
value: '330000',
|
||||
children: [{ text: 'Hangzhou', value: '330100' }],
|
||||
},
|
||||
{
|
||||
text: 'Jiangsu',
|
||||
value: '320000',
|
||||
children: [{ text: 'Nanjing', value: '320100' }],
|
||||
},
|
||||
],
|
||||
});
|
||||
const options = [
|
||||
{
|
||||
text: 'Zhejiang',
|
||||
value: '330000',
|
||||
children: [{ text: 'Hangzhou', value: '330100' }],
|
||||
},
|
||||
{
|
||||
text: 'Jiangsu',
|
||||
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
|
||||
<van-cascader
|
||||
v-model="cascaderValue"
|
||||
v-model="state.cascaderValue"
|
||||
title="Select Area"
|
||||
:options="options"
|
||||
active-color="#1989fa"
|
||||
@close="show = false"
|
||||
@close="state.show = false"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
```
|
||||
@ -79,18 +87,19 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="fieldValue"
|
||||
v-model="state.fieldValue"
|
||||
is-link
|
||||
readonly
|
||||
label="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
|
||||
v-model="cascaderValue"
|
||||
v-model="state.cascaderValue"
|
||||
title="Select Area"
|
||||
@close="show = false"
|
||||
:options="state.options"
|
||||
@close="state.show = false"
|
||||
@change="onChange"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
@ -98,9 +107,11 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
fieldValue: '',
|
||||
cascaderValue: '',
|
||||
@ -111,23 +122,27 @@ export default {
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange({ value }) {
|
||||
if (value === this.options[0].value) {
|
||||
});
|
||||
const onChange = ({ value }) => {
|
||||
if (value === state.options[0].value) {
|
||||
setTimeout(() => {
|
||||
this.options[0].children = [
|
||||
state.options[0].children = [
|
||||
{ text: 'Hangzhou', value: '330100' },
|
||||
{ text: 'Ningbo', value: '330200' },
|
||||
];
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
onFinish({ selectedOptions }) {
|
||||
this.show = false;
|
||||
this.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
},
|
||||
};
|
||||
const onFinish = ({ selectedOptions }) => {
|
||||
state.show = false;
|
||||
state.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
onChange,
|
||||
onFinish,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -22,51 +22,58 @@ app.use(Cascader);
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="fieldValue"
|
||||
v-model="state.fieldValue"
|
||||
is-link
|
||||
readonly
|
||||
label="地区"
|
||||
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
|
||||
v-model="cascaderValue"
|
||||
v-model="state.cascaderValue"
|
||||
title="请选择所在地区"
|
||||
@close="show = false"
|
||||
:options="options"
|
||||
@close="state.show = false"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
fieldValue: '',
|
||||
cascaderValue: '',
|
||||
// 选项列表，children 代表子选项，支持多级嵌套
|
||||
options: [
|
||||
{
|
||||
text: '浙江省',
|
||||
value: '330000',
|
||||
children: [{ text: '杭州市', value: '330100' }],
|
||||
},
|
||||
{
|
||||
text: '江苏省',
|
||||
value: '320000',
|
||||
children: [{ text: '南京市', value: '320100' }],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
});
|
||||
// 选项列表，children 代表子选项，支持多级嵌套
|
||||
const options = [
|
||||
{
|
||||
text: '浙江省',
|
||||
value: '330000',
|
||||
children: [{ text: '杭州市', value: '330100' }],
|
||||
},
|
||||
{
|
||||
text: '江苏省',
|
||||
value: '320000',
|
||||
children: [{ text: '南京市', value: '320100' }],
|
||||
},
|
||||
];
|
||||
// 全部选项选择完毕后，会触发 finish 事件
|
||||
onFinish({ selectedOptions }) {
|
||||
this.show = false;
|
||||
this.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
},
|
||||
const onFinish = ({ selectedOptions }) => {
|
||||
state.show = false;
|
||||
state.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
options,
|
||||
onFinish,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -77,10 +84,11 @@ export default {
|
||||
|
||||
```html
|
||||
<van-cascader
|
||||
v-model="cascaderValue"
|
||||
v-model="state.cascaderValue"
|
||||
title="请选择所在地区"
|
||||
:options="options"
|
||||
active-color="#1989fa"
|
||||
@close="show = false"
|
||||
@close="state.show = false"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
```
|
||||
@ -91,18 +99,19 @@ export default {
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="fieldValue"
|
||||
v-model="state.fieldValue"
|
||||
is-link
|
||||
readonly
|
||||
label="地区"
|
||||
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
|
||||
v-model="cascaderValue"
|
||||
v-model="state.cascaderValue"
|
||||
title="请选择所在地区"
|
||||
@close="show = false"
|
||||
:options="state.options"
|
||||
@close="state.show = false"
|
||||
@change="onChange"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
@ -110,9 +119,11 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
show: false,
|
||||
fieldValue: '',
|
||||
cascaderValue: '',
|
||||
@ -123,23 +134,27 @@ export default {
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange({ value }) {
|
||||
if (value === this.options[0].value) {
|
||||
});
|
||||
const onChange = ({ value }) => {
|
||||
if (value === state.options[0].value) {
|
||||
setTimeout(() => {
|
||||
this.options[0].children = [
|
||||
state.options[0].children = [
|
||||
{ text: '杭州市', value: '330100' },
|
||||
{ text: '宁波市', value: '330200' },
|
||||
];
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
onFinish({ selectedOptions }) {
|
||||
this.show = false;
|
||||
this.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
},
|
||||
};
|
||||
const onFinish = ({ selectedOptions }) => {
|
||||
state.show = false;
|
||||
state.fieldValue = selectedOptions.map((option) => option.text).join('/');
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
onChange,
|
||||
onFinish,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user