zhywpt-h5/components/CarUserType.vue

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

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

	const selectorObj = [{
		'lable': '普通车',
		'value': 0
	}, {
		'lable': '包含“货物专用运输(集装箱) ”的牵引车办理J类型集装箱',
		'value': 24
	}, {
		'lable': '不含“货物专用运输(集装箱)”的牵引车',
		'value': 27
	}, {
		'lable': '包含“货物专用运输 (集装箱)"和“普通货运”等其他项目的牵引车办理J2类型集装箱',
		'value': 28
	}]
	const props = defineProps(['dataList'])
	const emit = defineEmits(['useCarUserType'])
	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('useCarUserType', data)
	}
</script>

<style>
.text{
	padding:10rpx;
}
</style>