warst/warst-h5/pages/approval/com/pickerSelect.vue

<template>
	<view class="picker-select">
		<view class="dflex acenter" @click="show = true">
			<text
				class="tips-txt"
				:class="value || value === 0 ? 'value-txt' : 'place-txt'"
			>
				{{ showValue }}
			</text>
			<view
				style="margin-left: 3px"
				v-if="value || value === 0"
				@click.stop="clear"
			>
				<u-icon
					color="#c0c4cc"
					size="18"
					class="arrow-r"
					name="close-circle-fill"
				></u-icon>
			</view>
			<u-icon
				v-else
				color="#c0c4cc"
				size="14"
				class="arrow-r"
				name="arrow-right"
			></u-icon>
		</view>
		<u-picker
			keyName="name"
			closeOnClickOverlay
			:show="show"
			@close="show = false"
			@cancel="show = false"
			@confirm="handleConfirm"
			:columns="newColumns"
		></u-picker>
	</view>
</template>

<script>
export default {
	name: 'pickerSelect',
	model: {
		event: 'change',
		prop: 'value',
	},
	props: {
		placeholder: {
			default: '请选择',
			type: String,
		},
		value: [Number, String],
		columns: {
			default: () => [],
			type: Array,
		},
	},

	data() {
		return {
			show: false,
			newColumns: [[]],
		};
	},

	computed: {
		showValue() {
			const { value, placeholder } = this;
			return value || value === 0 ? value : placeholder;
		},
	},

	watch: {
		columns: {
			handler(val) {
				this.newColumns = [val];
			},
			immediate: true,
		},
	},
	methods: {
		clear() {
			this.$emit('change');
		},
		handleConfirm(e) {
			this.$emit('change', e.value[0].name);
			this.show = false;
		},
	},
};
</script>

<style scoped lang="scss">
.picker-select {
	.arrow-r {
		margin-top: 5rpx;
	}
	.place-txt {
		font-size: 14px;
		color: #c0c4cc;
	}
	.value-txt {
		font-size: 14px;
		color: #333;
	}
}
</style>