109 lines
2.1 KiB
Vue
109 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<a-select v-bind="$attrs"
|
|
v-on="$listeners"
|
|
:placeholder="placeholder"
|
|
:open="false"
|
|
:value="value"
|
|
@click.capture.native="onOpen">
|
|
<a-select-option v-for="item in options" :key="item[valueKey]" :value="item[valueKey]">{{item[labelKey]}}</a-select-option>
|
|
</a-select>
|
|
<!-- 移动端下拉框 -->
|
|
<van-popup v-model="show"
|
|
class="select-picker"
|
|
position="bottom"
|
|
safe-area-inset-bottom>
|
|
<van-picker
|
|
:loading="loading"
|
|
:title="placeholder"
|
|
:columns="options"
|
|
show-toolbar
|
|
:value-key="labelKey"
|
|
@confirm="onConfirm"
|
|
@cancel="onCancel"
|
|
/>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'SelectPicker',
|
|
props: {
|
|
placeholder: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
list: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => []
|
|
},
|
|
// 显示的字段
|
|
labelKey: {
|
|
type: String,
|
|
required: false,
|
|
default: 'text'
|
|
},
|
|
// 实际的值
|
|
valueKey: {
|
|
type: String,
|
|
required: false,
|
|
default: 'id'
|
|
},
|
|
value: {
|
|
type: String,
|
|
required: false,
|
|
default: undefined
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
show: false,
|
|
loading: false,
|
|
options: []
|
|
}
|
|
},
|
|
methods: {
|
|
// 打开下拉，并且获取下拉数据
|
|
onOpen () {
|
|
this.show = true
|
|
this.options = [
|
|
{ [this.labelKey]: '请选择', [this.valueKey]: undefined },
|
|
...this.list
|
|
]
|
|
},
|
|
// 确认
|
|
onConfirm (value) {
|
|
this.$emit('change', value[this.valueKey])
|
|
this.onCancel()
|
|
},
|
|
// 取消
|
|
onCancel () {
|
|
this.show = false
|
|
}
|
|
},
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "~@assets/less/modifyLessVars.less";
|
|
.select-picker {
|
|
/deep/.van-picker__confirm {
|
|
color: #fff;
|
|
}
|
|
/deep/.van-picker__cancel {
|
|
color: @text-color-secondary
|
|
}
|
|
/deep/.van-picker__mask {
|
|
background: transparent;
|
|
}
|
|
}
|
|
</style>
|