114 lines
2.0 KiB
Vue
114 lines
2.0 KiB
Vue
<template>
|
|
<div class="select">
|
|
<van-field
|
|
class="fieldVan"
|
|
v-model="result"
|
|
v-bind="$attrs"
|
|
:disabled="disabled"
|
|
ref="picker"
|
|
readonly
|
|
is-link
|
|
@click="onShow"
|
|
/>
|
|
<van-popup v-model="show" position="bottom" >
|
|
<van-picker
|
|
show-toolbar
|
|
value-key="text"
|
|
class="pickerVan"
|
|
:columns="columns"
|
|
:default-index="defaultIndex"
|
|
:title="$attrs.label"
|
|
@cancel="show = !show"
|
|
@confirm = "onConfirm"
|
|
@change="onChange"
|
|
/>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
model: {
|
|
prop: 'selectValue'
|
|
},
|
|
props: {
|
|
columns: {
|
|
type: Array
|
|
},
|
|
selectValue: {
|
|
type: String
|
|
},
|
|
disabled: {
|
|
type: Boolean
|
|
},
|
|
defaultIndex:{
|
|
type:Number
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
result: this.selectValue,
|
|
}
|
|
},
|
|
methods: {
|
|
onShow() {
|
|
if (!this.disabled) {
|
|
this.show = !this.show
|
|
}
|
|
},
|
|
onConfirm(item,index){
|
|
if(Array.isArray(item)){
|
|
this.result = item[1];
|
|
}else{
|
|
this.result = item;
|
|
}
|
|
this.show = !this.show
|
|
},
|
|
onChange(picker, item) {
|
|
|
|
},
|
|
changeValue(value){
|
|
this.result = value;
|
|
}
|
|
},
|
|
watch: {
|
|
selectValue: function (newVal) {
|
|
this.value = newVal
|
|
},
|
|
result(newVal) {
|
|
this.$emit('input', newVal)
|
|
}
|
|
},
|
|
mounted(){
|
|
this.defaultIndex = this.defaultIndex;
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.select .van-field .van-cell__right-icon {
|
|
transform: rotate(90deg);
|
|
position: absolute;
|
|
right: 22px;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.select .van-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.van-picker .van-picker-column{
|
|
overflow: unset !important;
|
|
width: calc(100% - 64px) !important;
|
|
}
|
|
.van-datetime-picker .van-picker-column{
|
|
overflow: hidden !important;
|
|
}
|
|
.select .van-field__control{
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|