blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

docs(DropdownMenu): fix demo state (#9278)

Browse Source
This commit is contained in:
neverland 2021-08-18 10:05:44 +08:00 committed by GitHub
parent cb25a8c4ae
commit 5adaeb704d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/dropdown-menu/README.md
View File

@ -23,20 +23,18 @@ app.use(DropdownItem);
```html ```html
<van-dropdown-menu> <van-dropdown-menu>
<van-dropdown-item v-model="state.value1" :options="option1" /> <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" /> <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu> </van-dropdown-menu>
``` ```
```js ```js
import { reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const value1 = ref(0);
value1: 0, const value2 = ref('a');
value2: 'a',
});
const option1 = [ const option1 = [
{ text: 'Option1', value: 0 }, { text: 'Option1', value: 0 },
{ text: 'Option2', value: 1 }, { text: 'Option2', value: 1 },
@ -49,7 +47,8 @@ export default {
]; ];
return { return {
state, value1,
value2,
option1, option1,
option2, option2,
}; };
@ -61,16 +60,16 @@ export default {
```html ```html
<van-dropdown-menu> <van-dropdown-menu>
<van-dropdown-item v-model="state.value" :options="option" /> <van-dropdown-item v-model="value" :options="option" />
<van-dropdown-item title="Title" ref="item"> <van-dropdown-item title="Title" ref="item">
<van-cell center title="Title"> <van-cell center title="Title">
<template #right-icon> <template #right-icon>
<van-switch v-model="state.switch1" size="24" active-color="#ee0a24" /> <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
</template> </template>
</van-cell> </van-cell>
<van-cell center title="Title"> <van-cell center title="Title">
<template #right-icon> <template #right-icon>
<van-switch v-model="state.switch2" size="24" active-color="#ee0a24" /> <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
</template> </template>
</van-cell> </van-cell>
<div style="padding: 5px 16px;"> <div style="padding: 5px 16px;">
@ -83,16 +82,14 @@ export default {
``` ```
```js ```js
import { ref, reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const item = ref(null); const item = ref(null);
const state = reactive({ const value = ref(0);
value: 0, const switch1 = ref(false);
switch1: false, const switch2 = ref(false);
switch2: false,
});
const options = [ const options = [
{ text: 'Option1', value: 0 }, { text: 'Option1', value: 0 },
{ text: 'Option2', value: 1 }, { text: 'Option2', value: 1 },
@ -104,7 +101,9 @@ export default {
return { return {
item, item,
state, value,
switch1,
switch2,
options, options,
onConfirm, onConfirm,
}; };

27
src/dropdown-menu/README.zh-CN.md
View File

@ -23,8 +23,8 @@ app.use(DropdownItem);
```html ```html
<van-dropdown-menu> <van-dropdown-menu>
<van-dropdown-item v-model="state.value1" :options="option1" /> <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" /> <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu> </van-dropdown-menu>
``` ```
@ -33,10 +33,8 @@ import { reactive } from 'vue';
export default { export default {
setup() { setup() {
const state = reactive({ const value1 = ref(0);
value1: 0, const value2 = ref('a');
value2: 'a',
});
const option1 = [ const option1 = [
{ text: '全部商品', value: 0 }, { text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 }, { text: '新款商品', value: 1 },
@ -49,7 +47,8 @@ export default {
]; ];
return { return {
state, value1,
value2,
option1, option1,
option2, option2,
}; };
@ -85,16 +84,14 @@ export default {
``` ```
```js ```js
import { ref, reactive } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const item = ref(null); const item = ref(null);
const state = reactive({ const value = ref(0);
value: 0, const switch1 = ref(false);
switch1: false, const switch2 = ref(false);
switch2: false,
});
const options = [ const options = [
{ text: '全部商品', value: 0 }, { text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 }, { text: '新款商品', value: 1 },
@ -106,7 +103,9 @@ export default {
return { return {
item, item,
state, value,
switch1,
switch2,
options, options,
onConfirm, onConfirm,
}; };