一 按需引入
import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu);
Vue.use(DropdownItem)
二 在页面html写入
基础用法
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" />
</van-dropdown-menu>
export default {
data() {
return {
value1: 0,
option1: [
{ text: '广东', value: 0 },
{ text: '山东', value: 1 },
{ text: '北京', value: 2 },
],
};
},
};
假如是这样的话那么下拉框就会默认显示第一个字眼“广东”，比如我们想展示的是地区两个字作为标题,那就必须把地区放在第一位,但是我们在做项目中后端是不会传地区这两个的给到我们, 我们要返回给后台的字段里面根本就不会有地区这一区域。
如果想要一开始就显示请地区这样的提示字眼，那么我们可以去看看vant的api文档，发现有一个title的字眼，这个title就是下拉框的显示文字，一开始很多人以为这个下拉框的title只是用来显示然后点击下拉框的item之后会自动绑定过的，但其实是错误的，以下就是一个很好的例子
基础用法
<van-dropdown-menu>
<van-dropdown-item :title='title' v-model="value1" :options="option1" />
</van-dropdown-menu>
export default {
data() {
return {
value1: 0,
title: '地区',
option1: [
{ text: '广东', value: 1 },
{ text: '山东', value: 2 },
{ text: '北京', value: 3 },
],
};
},
};
但是这样你会发现你绑定了title 之后你选择的任何值都不会重新赋值给title 无法正确的展示用户所选择的值 一旦你自己使用title进行绑定，那么每次修改时就要修改title，查看vant api可以发现有change事件，接下来就可以操作了
基础用法
<van-dropdown-menu>
<van-dropdown-item :title='title' v-model="value1" @change='handelChange' :options="option1" />
</van-dropdown-menu>
export default {
data() {
return {
value1: 0,
title: '地区',
option1: [
{ text: '广东', value: 1 },
{ text: '山东', value: 2 },
{ text: '北京', value: 3 },
],
};
},
methods:{
// change事件可以拿到的是value
handelChange(value){
this.title = this.option1[value-1].text
// 这样的话我们可以通过这个方法改变tiele值
}
}
};
问题来了,如果后端返回给你的value值不是按照1,2,3,4,5返回给你而是0010,0020,0030,0040, 那我们用上面的方法去重新赋值title就会报错, 因为上面的value-1就得不到对应的索引 这时候我们就可以用数组filter的方法
// change事件可以拿到的是value
handelChange(value){
console.log(this.option1.filter(item => item.value === this.value)[0].text )
// 这里打印出来的值就是我们想要的text
this.title=this.option1.filter(item => item.value === this.value)[0].text
// 这样的话我们可以通过这个方法改变tiele值
}
