利用vant库编写3级下拉菜单
时间: 2023-07-28 18:16:50 浏览: 175
3级下拉菜单
4星 · 用户满意度95%
好的,下面是一个利用vant库编写3级下拉菜单的示例代码:
```html
<van-dropdown-menu>
<van-dropdown-item v-model="selectedItem1" :options="options1">一级菜单</van-dropdown-item>
<van-dropdown-item v-model="selectedItem2" :options="options2">二级菜单</van-dropdown-item>
<van-dropdown-item v-model="selectedItem3" :options="options3">三级菜单</van-dropdown-item>
</van-dropdown-menu>
```
```javascript
export default {
data() {
return {
selectedItem1: '',
selectedItem2: '',
selectedItem3: '',
options1: [
{ text: '选项1', value: '1' },
{ text: '选项2', value: '2' },
{ text: '选项3', value: '3' },
],
options2: [
{ text: '选项1-1', value: '1-1' },
{ text: '选项1-2', value: '1-2' },
{ text: '选项1-3', value: '1-3' },
{ text: '选项2-1', value: '2-1' },
{ text: '选项2-2', value: '2-2' },
{ text: '选项2-3', value: '2-3' },
{ text: '选项3-1', value: '3-1' },
{ text: '选项3-2', value: '3-2' },
{ text: '选项3-3', value: '3-3' },
],
options3: [
{ text: '选项1-1-1', value: '1-1-1' },
{ text: '选项1-1-2', value: '1-1-2' },
{ text: '选项1-2-1', value: '1-2-1' },
{ text: '选项1-2-2', value: '1-2-2' },
{ text: '选项1-3-1', value: '1-3-1' },
{ text: '选项1-3-2', value: '1-3-2' },
{ text: '选项2-1-1', value: '2-1-1' },
{ text: '选项2-1-2', value: '2-1-2' },
{ text: '选项2-2-1', value: '2-2-1' },
{ text: '选项2-2-2', value: '2-2-2' },
{ text: '选项2-3-1', value: '2-3-1' },
{ text: '选项2-3-2', value: '2-3-2' },
{ text: '选项3-1-1', value: '3-1-1' },
{ text: '选项3-1-2', value: '3-1-2' },
{ text: '选项3-2-1', value: '3-2-1' },
{ text: '选项3-2-2', value: '3-2-2' },
{ text: '选项3-3-1', value: '3-3-1' },
{ text: '选项3-3-2', value: '3-3-2' },
],
};
},
};
```
在这个示例中,我们使用了`van-dropdown-menu`组件来包含三个`van-dropdown-item`组件,每个`van-dropdown-item`组件都绑定了一个选中的值,以及对应的选项列表。其中,`options1`是一级菜单的选项列表,`options2`是二级菜单的选项列表,`options3`是三级菜单的选项列表。当用户选择一级菜单中的某个选项后,二级菜单会根据选中的一级菜单选项动态改变可选项列表,同理,当用户选择二级菜单中的某个选项后,三级菜单也会根据选中的二级菜单选项动态改变可选项列表。用户最终选择的选项值会分别保存在`selectedItem1`、`selectedItem2`、`selectedItem3`中。
阅读全文