Vant DropdownMenu 下拉菜单
Vant DropdownMenu 下拉主要用于一些栏目较多的地方进行制作下拉。
import Vue from 'vue'; import { DropdownMenu, DropdownItem } from 'vant'; Vue.use(DropdownMenu); Vue.use(DropdownItem);
<van-dropdown-menu> <van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value2" :options="option2" /> </van-dropdown-menu>
export default { data() { return { value1: 0, value2: 'a', option1: [ { text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 } ], option2: [ { text: '认排序', value: 'a' }, { text: '好评排序', value: 'b' }, { text: '销量排序', value: 'c' }, ] } } };
通过插槽可以DropdownItem的,此时需要使用实例上的toggle手动控制的
<van-dropdown-menu> <van-dropdown-item v-model="value" :options="option" /> <van-dropdown-item title="筛选" ref="item"> <van-switch-cell v-model="switch1" title="包邮" /> <van-switch-cell v-model="switch2" title="团购" /> <van-button block type="info" @click="onConfirm">确认</van-button> </van-dropdown-item> </van-dropdown-menu>
export default { data() { return { value: 0, switch1: false, switch2: false, option: [ { text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 } ] } }, methods: { onConfirm() { this.$refs.item.toggle(); } } };
通过active-color可以和选项的选中态颜色
<van-dropdown-menu active-color="#ee0a24"> <van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value2" :options="option2" /> </van-dropdown-menu>
将direction值设置为up,即可向上展开
<van-dropdown-menu direction="up"> <van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value2" :options="option2" /> </van-dropdown-menu>
<van-dropdown-menu> <van-dropdown-item v-model="value1" disabled :options="option1" /> <van-dropdown-item v-model="value2" disabled :options="option2" /> </van-dropdown-menu>
API
通过 ref 可以到 DropdownItem 实例并实例,详见