mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(DropdownMenu): use composition api
This commit is contained in:
chenjiahan
parent
540ffb6a4c
commit
0ef23a3477
@ -17,27 +17,35 @@ app.use(DropdownItem);
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value1" :options="option1" />
|
||||
<van-dropdown-item v-model="value2" :options="option2" />
|
||||
<van-dropdown-item v-model="state.value1" :options="option1" />
|
||||
<van-dropdown-item v-model="state.value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value1: 0,
|
||||
value2: 'a',
|
||||
option1: [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
{ text: 'Option3', value: 2 },
|
||||
],
|
||||
option2: [
|
||||
{ text: 'Option A', value: 'a' },
|
||||
{ text: 'Option B', value: 'b' },
|
||||
{ text: 'Option C', value: 'c' },
|
||||
],
|
||||
});
|
||||
const option1 = [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
{ text: 'Option3', value: 2 },
|
||||
];
|
||||
const option2 = [
|
||||
{ text: 'Option A', value: 'a' },
|
||||
{ text: 'Option B', value: 'b' },
|
||||
{ text: 'Option C', value: 'c' },
|
||||
];
|
||||
|
||||
return {
|
||||
state,
|
||||
option1,
|
||||
option2,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -47,16 +55,16 @@ export default {
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value" :options="option" />
|
||||
<van-dropdown-item v-model="state.value" :options="option" />
|
||||
<van-dropdown-item title="Title" ref="item">
|
||||
<van-cell center title="Title">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="switch1" size="24" active-color="#ee0a24" />
|
||||
<van-switch v-model="state.switch1" size="24" active-color="#ee0a24" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell center title="Title">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="switch2" size="24" active-color="#ee0a24" />
|
||||
<van-switch v-model="state.switch2" size="24" active-color="#ee0a24" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<div style="padding: 5px 16px;">
|
||||
@ -69,23 +77,31 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const item = ref(null);
|
||||
const state = reactive({
|
||||
value: 0,
|
||||
switch1: false,
|
||||
switch2: false,
|
||||
option: [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
{ text: 'Option3', value: 2 },
|
||||
],
|
||||
});
|
||||
const options = [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
{ text: 'Option3', value: 2 },
|
||||
];
|
||||
const onConfirm = () => {
|
||||
item.value.toggle();
|
||||
};
|
||||
|
||||
return {
|
||||
item,
|
||||
state,
|
||||
option,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm() {
|
||||
this.$refs.item.toggle();
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -21,27 +21,35 @@ app.use(DropdownItem);
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value1" :options="option1" />
|
||||
<van-dropdown-item v-model="value2" :options="option2" />
|
||||
<van-dropdown-item v-model="state.value1" :options="option1" />
|
||||
<van-dropdown-item v-model="state.value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value1: 0,
|
||||
value2: 'a',
|
||||
option1: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 },
|
||||
],
|
||||
option2: [
|
||||
{ text: '默认排序', value: 'a' },
|
||||
{ text: '好评排序', value: 'b' },
|
||||
{ text: '销量排序', value: 'c' },
|
||||
],
|
||||
});
|
||||
const option1 = [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 },
|
||||
];
|
||||
const option2 = [
|
||||
{ text: '默认排序', value: 'a' },
|
||||
{ text: '好评排序', value: 'b' },
|
||||
{ text: '销量排序', value: 'c' },
|
||||
];
|
||||
|
||||
return {
|
||||
state,
|
||||
option1,
|
||||
option2,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -75,23 +83,31 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const item = ref(null);
|
||||
const state = reactive({
|
||||
value: 0,
|
||||
switch1: false,
|
||||
switch2: false,
|
||||
option: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 },
|
||||
],
|
||||
});
|
||||
const options = [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 },
|
||||
];
|
||||
const onConfirm = () => {
|
||||
item.value.toggle();
|
||||
};
|
||||
|
||||
return {
|
||||
item,
|
||||
state,
|
||||
option,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm() {
|
||||
this.$refs.item.toggle();
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -58,74 +58,79 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, reactive, ref, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { RED } from '../../utils/constant';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
disableMenu: '禁用菜单',
|
||||
switchTitle1: '包邮',
|
||||
switchTitle2: '团购',
|
||||
itemTitle: '筛选',
|
||||
expandDirection: '向上展开',
|
||||
customContent: '自定义菜单内容',
|
||||
customActiveColor: '自定义选中态颜色',
|
||||
option1: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 },
|
||||
],
|
||||
option2: [
|
||||
{ text: '默认排序', value: 'a' },
|
||||
{ text: '好评排序', value: 'b' },
|
||||
{ text: '销量排序', value: 'c' },
|
||||
],
|
||||
},
|
||||
'en-US': {
|
||||
disableMenu: 'Disable Menu',
|
||||
switchTitle1: 'Title',
|
||||
switchTitle2: 'Title',
|
||||
itemTitle: 'Title',
|
||||
expandDirection: 'Expand Direction',
|
||||
customContent: 'Custom Content',
|
||||
customActiveColor: 'Custom Active Color',
|
||||
option1: [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
{ text: 'Option3', value: 2 },
|
||||
],
|
||||
option2: [
|
||||
{ text: 'Option A', value: 'a' },
|
||||
{ text: 'Option B', value: 'b' },
|
||||
{ text: 'Option C', value: 'c' },
|
||||
],
|
||||
},
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
disableMenu: '禁用菜单',
|
||||
switchTitle1: '包邮',
|
||||
switchTitle2: '团购',
|
||||
itemTitle: '筛选',
|
||||
expandDirection: '向上展开',
|
||||
customContent: '自定义菜单内容',
|
||||
customActiveColor: '自定义选中态颜色',
|
||||
option1: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 },
|
||||
],
|
||||
option2: [
|
||||
{ text: '默认排序', value: 'a' },
|
||||
{ text: '好评排序', value: 'b' },
|
||||
{ text: '销量排序', value: 'c' },
|
||||
],
|
||||
},
|
||||
'en-US': {
|
||||
disableMenu: 'Disable Menu',
|
||||
switchTitle1: 'Title',
|
||||
switchTitle2: 'Title',
|
||||
itemTitle: 'Title',
|
||||
expandDirection: 'Expand Direction',
|
||||
customContent: 'Custom Content',
|
||||
customActiveColor: 'Custom Active Color',
|
||||
option1: [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
{ text: 'Option3', value: 2 },
|
||||
],
|
||||
option2: [
|
||||
{ text: 'Option A', value: 'a' },
|
||||
{ text: 'Option B', value: 'b' },
|
||||
{ text: 'Option C', value: 'c' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
data() {
|
||||
return {
|
||||
RED,
|
||||
export default {
|
||||
setup() {
|
||||
const item = ref(null);
|
||||
const t = useTranslate(i18n);
|
||||
|
||||
const state = reactive({
|
||||
switch1: true,
|
||||
switch2: false,
|
||||
value1: 0,
|
||||
value2: 'a',
|
||||
});
|
||||
|
||||
const option1 = computed(() => t('option1'));
|
||||
const option2 = computed(() => t('option2'));
|
||||
|
||||
const onConfirm = () => {
|
||||
item.value?.toggle();
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
option1() {
|
||||
return this.t('option1');
|
||||
},
|
||||
|
||||
option2() {
|
||||
return this.t('option2');
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm() {
|
||||
this.$refs.item.toggle();
|
||||
},
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
RED,
|
||||
item,
|
||||
option1,
|
||||
option2,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user