第一种Vant -DropdownMenu 下拉框单选形式
Array = [
{
text: "东来汽车维修",
value: 0
}, {
text: "广汽维修中心",
value: 1
}]
第二种picker选择器下拉框数组单列模式单选模式
数组形式 : ['杭州', '宁波', '温州', '嘉兴', '湖州']
readonly clickable label="居住城市" :value="value1" placeholder="选择最喜欢居住的城市" @click="showPicker = true" /> show-toolbar title="选择最喜欢居住的城市" :columns="city" @cancel="onCancel" @confirm="onConfirm1" /> 第三种picker选择器下拉框数组对象模式单选模式 cityArray: [{cityName: '杭州', id: 10},{cityName: '宁波', id: 12},{cityName: '温州', id: 14}] readonly clickable label="旅游城市" :value="value2" placeholder="选择你最喜欢的城市" @click="showPicker2 = true" /> show-toolbar value-key="cityName" title="选择你最喜欢的城市" :columns="cityArray" @cancel="showPicker2 = false" @confirm="onConfirm2" /> 第四种van-dropdown-item下拉框多选 第五种van-checkbox-group下拉框多选 readonly clickable label="居住城市" :value="value4" placeholder="选择去过的城市" @click="showPicker4 = true" /> v-for="(item, index) in cityArray" clickable :key="index" :title="item.cityName" @click="toggle(index)" > :name="item" ref="checkboxes" slot="right-icon" />
export default {
data() {
return {
value: 0,
value1: '',
value2: '',
value3: '',
value4: '',
cityId: '',
cityValue: '',
showPicker: false,
showPicker2: false,
showPicker3: false,
showPicker4: false,
city: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
cityArray: [
{cityName: '杭州', id: 10},
{cityName: '宁波', id: 12},
{cityName: '温州', id: 14},
{cityName: '嘉兴', id: 16},
{cityName: '湖州', id: 18}
],
switch1: false,
switch2: false,
switch3: false,
playCityName: [],
playCityId: [],
companyName: [
{
text: "东来汽车维修",
value: 0
}, {
text: "广汽维修中心",
value: 1
}],
result: [],
};
},
methods: {
onCancel() {
this.showPicker = false;
},
onConfirm1(value) {
this.$toast(value)
this.value1 = value;
this.showPicker = false;
},
onConfirm2(value) {
console.log(value)
this.$toast(value.cityName+value.id)
this.value2 = value.cityName
this.showPicker2 = false;
},
onConfirm3(value) {
this.$refs.item.toggle();
this.value3Arr = []
if(this.switch1 === true) {
this.value3Arr.push('杭州')
}
if(this.switch2 === true) {
this.value3Arr.push('宁波')
}
if(this.switch3 === true) {
this.value3Arr.push('温州')
}
this.value3 =this.value3Arr.join(',')
},
onConfirm4() {
this.playCityName = []
this.playCityId = []
this.result.forEach(item => {
this.playCityName.push(item.cityName)
this.playCityId.push(item.id)
})
//这里要转成字符串形式再进行赋值,因为v-model此时接受的是字符串而不是数组
// this.value4 = this.playCityName
this.value4 = this.playCityName.join(',')
this.cityId = this.playCityId
this.showPicker4 = false;
},
toggle(index) {
this.$refs.checkboxes[index].toggle();
},
}
};
.select-wrapper {
width: 100%;
height:1000px;
overflow-y: scroll;
background: #fff;
}
.van-dropdown-menu__title::after {
position: absolute;
top: 50%;
right: -67px !important;
margin-top: -5px;
border: 3px solid;
border-color: transparent transparent currentColor currentColor;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0.8;
content: "";
}
.title {
background: #007aff!important;
opacity: .5;
color: #fff;
}
.he-44 {
height: 44px;
line-height: 44px;
}
.cancel {
color: #007aff!important;
}
.tip {
color: black;
}
.confirm {
color: #007aff!important;
}