80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<picker :range="optionLabels" @change="onChange">
|
||
|
|
<view class="form-select">
|
||
|
|
<text :class="['select-text', selectedLabel ? '' : 'placeholder']">
|
||
|
|
{{ selectedLabel || placeholder }}
|
||
|
|
</text>
|
||
|
|
<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/arrow_right.png" class="arrow-right" mode="aspectFit" />
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "FormItemSelect",
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: ""
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
type: Array,
|
||
|
|
default: function() {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
placeholder: {
|
||
|
|
type: String,
|
||
|
|
default: "请选择"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
optionLabels: function() {
|
||
|
|
return this.options.map(function(item) {
|
||
|
|
return item.label;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
selectedLabel: function() {
|
||
|
|
var self = this;
|
||
|
|
var found = this.options.find(function(item) {
|
||
|
|
return item.value == self.value;
|
||
|
|
});
|
||
|
|
return found ? found.label : "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onChange: function(e) {
|
||
|
|
var index = e.detail.value;
|
||
|
|
var selected = this.options[index];
|
||
|
|
if (selected) {
|
||
|
|
this.$emit("input", selected.value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.form-select {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 100%;
|
||
|
|
height: 80rpx;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
padding: 0 24rpx;
|
||
|
|
}
|
||
|
|
.select-text {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
.placeholder {
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
.arrow-right {
|
||
|
|
width: 24rpx;
|
||
|
|
height: 24rpx;
|
||
|
|
}
|
||
|
|
</style>
|