57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
|
<picker :range="options" @change="onChange">
|
|
<view class="form-select">
|
|
<text :class="['select-text', value ? '' : 'placeholder']">
|
|
{{ value || 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: '请选择' }
|
|
},
|
|
methods: {
|
|
onChange: function (e) {
|
|
var index = e.detail.value;
|
|
var selected = this.options[index];
|
|
if (selected !== undefined) {
|
|
this.$emit('input', selected);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.form-select {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.select-text {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.placeholder {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.arrow-right {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
</style>
|