assess-app/components/en-from/en-select/en-select.vue

<template>
	<view class="box">
		<view class="input-box flex-shrink0" @click="showPickerObj">
			<view class="input-box-left size-28" :style="{'letter-spacing':labelWidth}">
				{{ label }}
			</view>
			<view class="input-box-right row-c">
				<text class="size-28 p-r10"
					:class="{'no-option':!optionName}">{{ optionName ? optionName : placeholder }}</text>
				<!-- <text class="iconfont">&#xe62b;</text> -->
				<uni-icons type="forward" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<uni-data-picker :popup-title="'选择'+label" :localdata="localData" ref="pickerObj" v-show="showPicker"
			@change="pickerChange" :border="false" :clear-icon="false" @popupclosed="setPopupClosed">
		</uni-data-picker>
	</view>
</template>

<script>
	export default {
		name: 'en-select',
		props: {
			map: {
				default: {}
			},
			localData: {
				default: []
			},
			label: {
				type: String,
				default: '标题'
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			name: {
				type: String,
				default: 'text'
			},
			valueType: {
				type: String,
				default: '1'
			},
			value: {
				default: ''
			}
		},
		data() {
			return {
				inputValue: [],
				optionName: '',
				labelWidth: 0,
				showPicker: false
			}
		},
		components: {},
		mounted() {
			this.setValue()
			this.setLabelWidth()
		},
		watch: {
			'value': function() {
				this.setValue()
			},
			'inputValue': function() {
				if (this.valueType === '1') {
					this.$emit('input', this.inputValue.join(','))
				} else {
					console.log('this.inputValue', this.inputValue)
					this.$emit('input', this.inputValue)
				}
			},
			'localData': function() {
				this.setValue()
			}
		},
		methods: {
			setValue() {
				let value = this.value
				if (typeof value === 'number') {
					value += '';
				}
				if (!value) {
					value = []
				} else if (typeof value === 'string') {
					value = value.split(',')
				}

				if (value && (this.inputValue !== value || this.optionName === '')) {
					this.inputValue = value
					this.optionName = "";
					this.localData.forEach((one) => {
						if (this.inputValue[0] && one.value + '' === this.inputValue[0] + '') {
							this.optionName += one.text + " ";
							if (one.children) {
								one.children.forEach((two) => {
									if (this.inputValue[1] && two.value + '' === this.inputValue[1] + '') {
										this.optionName += two.text + " ";
										if (two.children) {
											two.children.forEach((three) => {
												if (this.inputValue[2] && three.value + '' === this
													.inputValue[2] + '') {
													this.optionName += three.text + " ";
												}
											})
										}
									}
								})
							}
						}
					})
				}

			},
			setPopupClosed() {
				this.showPicker = false;
			},
			showPickerObj() {
				this.$refs.pickerObj.show();
				this.showPicker = true;
			},
			pickerChange(data) {
				this.optionName = "";
				this.inputValue = [];
				console.log(data)
				data.detail.value.forEach((item) => {
					this.optionName += item.text + " ";
					this.inputValue.push(item.value)
				});
				this.showPicker = false;
			},
			setLabelWidth() {
				let differenceNum = 4 - this.label.length;
				if (differenceNum === 2) {
					this.labelWidth = '2em'
				} else if (differenceNum === 1) {
					this.labelWidth = '0.5em'
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import url("../../static/css/en-common.css");

	::v-deep .selected-item-active {
		border-bottom: 2px solid #FF0000 !important;
	}

	.box {
		.input-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input-box-left {
				color: #333333;
			}

			.input-box-right {
				text-align: right;

				text {
					font-size: 28rpx;
					color: #333;
				}

				.iconfont {
					float: right;
				}

				.no-option {
					color: #999999;
				}

			}
		}
	}
</style>