<template>
<div class="select-wrapper">
<van-cell title="下拉菜单形式分类" class="title"/>
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
第一种Vant -DropdownMenu 下拉框单选形式
</van-divider>
<van-divider :style="{ color: 'red', borderColor: '#1989fa', padding: '0 16px' }">
Array = [
{
text: "东来汽车维修",
value: 0
}, {
text: "广汽维修中心",
value: 1
}]
</van-divider>
<van-dropdown-menu>
<van-dropdown-item v-model="value" :options="companyName" />
</van-dropdown-item>
</van-dropdown-menu>
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
第二种picker选择器下拉框数组单列模式单选模式
</van-divider>
<van-divider :style="{ color: 'red', borderColor: '#1989fa', padding: '0 16px' }">
数组形式 ： ['杭州', '宁波', '温州', '嘉兴', '湖州']
</van-divider>
<van-field
readonly
clickable
label="居住城市"
:value="value1"
placeholder="选择最喜欢居住的城市"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
title="选择最喜欢居住的城市"
:columns="city"
@cancel="onCancel"
@confirm="onConfirm1"
/>
</van-popup>
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
第三种picker选择器下拉框数组对象模式单选模式
</van-divider>
<van-divider :style="{ color: 'red', borderColor: '#1989fa', padding: '0 16px' }">
cityArray: [{cityName: '杭州', id: 10},{cityName: '宁波', id: 12},{cityName: '温州', id: 14}]
</van-divider>
<van-field
readonly
clickable
label="旅游城市"
:value="value2"
placeholder="选择你最喜欢的城市"
@click="showPicker2 = true"
/>
<van-popup v-model="showPicker2" position="bottom">
<van-picker
show-toolbar
value-key="cityName"
title="选择你最喜欢的城市"
:columns="cityArray"
@cancel="showPicker2 = false"
@confirm="onConfirm2"
/>
</van-popup>
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
第四种van-dropdown-item下拉框多选
</van-divider>
<div style="position:relative;">
<van-cell-group>
<van-field v-model="value3" readonly placeholder="请选择你去过的城市"/>
</van-cell-group>
<!-- 将van-dropdown-menu组件定位在field输入框内，结合在一起显示 -->
<van-dropdown-menu style="position:absolute;top:5px;right:40px;background:none;">
<van-dropdown-item ref="item">
<van-switch-cell v-model="switch1" title="杭州" />
<van-switch-cell v-model="switch2" title="宁波"/>
<van-switch-cell v-model="switch3" title="温州"/>
<van-button block type="info" @click="onConfirm3">确认</van-button>
</van-dropdown-item>
</van-dropdown-menu>
</div>
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
第五种van-checkbox-group下拉框多选
</van-divider>
<van-field
readonly
clickable
label="居住城市"
:value="value4"
placeholder="选择去过的城市"
@click="showPicker4 = true"
/>
<van-popup v-model="showPicker4" position="bottom">
<van-row class="he-44">
<van-col span="8" class="cancel" @click="showPicker4 = false">取消</van-col>
<van-col span="8" class="tip">选择去过的城市</van-col>
<van-col span="8" class="confirm" @click="onConfirm4">确定</van-col>
</van-row>
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell
v-for="(item, index) in cityArray"
clickable
:key="index"
:title="item.cityName"
@click="toggle(index)"
>
<van-checkbox
:name="item"
ref="checkboxes"
slot="right-icon"
/>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</van-popup>
</div>
</template>
<script>
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();
},
}
};
</script>
<style scoped>
.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;
}
</style>
