zhywpt-h5/components/UserType.vue

<template>
	<picker color="uni-picker-container" :disabled="dataList.disabled" range-key="lable" mode="selector"
		@change="bindPickerChange($event)" :range="selectorObj">
		<view class="text" :class='{isText: !dataList[dataList.value]}'>
			{{handleTxt}}
		</view>
	</picker>
</template>

<script setup lang='ts'>
	import {
		computed,
		ref
	} from 'vue'

	const selectorObj = [{
		'lable': '个人用户',
		'value': 1
	}, {
		'lable': '单位用户',
		'value': 2
	}]
	const props = defineProps(['dataList'])
	const emit = defineEmits(['useUserType'])
	const handleTxt = computed(() => {
		if (props.dataList[props.dataList.value] !== undefined) {
			return selectorObj.find(item => item.value == props.dataList[props.dataList.value])?.lable
		} else {
			return props.dataList.hint ? props.dataList.hint : '请选择' + props.dataList.title
		}
	})
	const bindPickerChange = (e) => {
		let select = e.target.value
		// #ifdef H5
		select = e.detail.value
		// #endif
		const data = selectorObj.find((item, index) => index === select).value
		emit('useUserType', data)
	}
</script>

<style>
.text{
	padding:10rpx;

}
	.text.isText {
		color: #a8a8a8;
	}
</style>