DropdownMenu, DropdownItem的用法是这样的<van-dropdown-menu> <van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value2" :options="option2" /> </van-dropdown-menu>const option1 = [ { text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }, ]; const option2 = [ { text: '默认排序', value: 'a' }, { text: '好评排序', value: 'b' }, { text: '销量排序', value: 'c' }, ]; vue3项目中,请用<script setup>+vant组件库的DropdownMenu帮我实现一排下拉选择框,第一个是综合排序,选项有综合排序、最新上架、价格最低、距离最近,第二个品牌不限,选项有品牌不限,大众、本田、宝马、丰田、奔驰,第三个是价格不限,选项有价格不限、5万以下、5-10万、10-15万、15万以上,第四个是车龄不限,选项有车龄不限、2、4、6、8、10,第五个是里程不限,选项有里程不限,3、6、9
时间: 2024-02-24 14:57:49 浏览: 139
LC-select:Superlight Vanilla javascript插件,用于现代Web下拉菜单。 支持多选项,搜索和图像。 专为无缝主题设计
下面是使用 DropdownMenu 和 DropdownItem 实现的代码:
```
<script setup>
import { ref } from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
const comprehensiveOptions = [
{ text: '综合排序', value: 0 },
{ text: '最新上架', value: 1 },
{ text: '价格最低', value: 2 },
{ text: '距离最近', value: 3 },
];
const brandOptions = [
{ text: '品牌不限', value: 0 },
{ text: '大众', value: 1 },
{ text: '本田', value: 2 },
{ text: '宝马', value: 3 },
{ text: '丰田', value: 4 },
{ text: '奔驰', value: 5 },
];
const priceOptions = [
{ text: '价格不限', value: 0 },
{ text: '5万以下', value: 1 },
{ text: '5-10万', value: 2 },
{ text: '10-15万', value: 3 },
{ text: '15万以上', value: 4 },
];
const ageOptions = [
{ text: '车龄不限', value: 0 },
{ text: '2年以内', value: 1 },
{ text: '4年以内', value: 2 },
{ text: '6年以内', value: 3 },
{ text: '8年以内', value: 4 },
{ text: '10年以内', value: 5 },
];
const mileageOptions = [
{ text: '里程不限', value: 0 },
{ text: '3万公里以内', value: 1 },
{ text: '6万公里以内', value: 2 },
{ text: '9万公里以内', value: 3 },
];
const comprehensiveValue = ref(0);
const brandValue = ref(0);
const priceValue = ref(0);
const ageValue = ref(0);
const mileageValue = ref(0);
</script>
<template>
<DropdownMenu>
<DropdownItem
v-model:active="comprehensiveValue"
:options="comprehensiveOptions"
>
综合排序
</DropdownItem>
<DropdownItem
v-model:active="brandValue"
:options="brandOptions"
>
品牌不限
</DropdownItem>
<DropdownItem
v-model:active="priceValue"
:options="priceOptions"
>
价格不限
</DropdownItem>
<DropdownItem
v-model:active="ageValue"
:options="ageOptions"
>
车龄不限
</DropdownItem>
<DropdownItem
v-model:active="mileageValue"
:options="mileageOptions"
>
里程不限
</DropdownItem>
</DropdownMenu>
</template>
```
上面的代码实现了一个 DropdownMenu,里面包含了五个 DropdownItem,分别用来选择综合排序、品牌、价格、车龄和里程。每个 DropdownItem 都绑定了一个 ref 类型的变量作为 v-model,用来绑定当前选中的值。每个 DropdownItem 的 options 属性绑定了一个选项数组,用来设置下拉框中的选项。在模板中,我们直接使用 DropdownItem 组件来实现下拉框,每个 DropdownItem 都有一个 slot,用来显示当前选中的选项。
阅读全文