zhywpt-h5/components/Character.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
	}, {
		'lable': '营运客车',
		'value': 3
	}, {
		'lable': '非营运货车',
		'value': 4
	}, {
		'lable': '营运货车',
		'value': 5
	}, {
		'lable': '特种车',
		'value': 6
	}, {
		'lable': '挂车',
		'value': 7
	}, {
		'lable': '应急救援车',
		'value': 8
	}]

	const props = defineProps(['dataList'])
	const emit = defineEmits(['feeVehicleType'])
	const handleTxt = computed(() => {
		if (props.dataList[props.dataList.value] !== undefined) {
			return selectorObj.find(item => item.value == props.dataList[props.dataList.value])?.lable ||  props.dataList[props.dataList.value]
		} 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('feeVehicleType', data)
	}
</script>

<style>
	.text {
		padding: 10rpx;

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