zhywpt-h5/components/FeeVehicleType.vue

<template>
	<picker color="uni-picker-container" :disabled="props.dataList.disabled" range-key="lable" mode="selector"
		@change="bindPickerChange($event)" :range="selectorObj" :class='{isText: !dataList[dataList.value]}'>
		<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': 11
	}, {
		'lable': '二型货车',
		'value': 12
	}, {
		'lable': '三型货车',
		'value': 13
	}, {
		'lable': '四型货车',
		'value': 14
	}, {
		'lable': '五型货车',
		'value': 15
	}, {
		'lable': '六型货车',
		'value': 16
	}, {
		'lable': '一型专项作业车',
		'value': 21
	}, {
		'lable': '二型专项作业车',
		'value': 22
	}, {
		'lable': '三型专项作业车',
		'value': 23
	}, {
		'lable': '四型专项作业车',
		'value': 24
	}, {
		'lable': '五型专项作业车',
		'value': 25
	}, {
		'lable': '六型专项作业车',
		'value': 26
	}, ]
	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
		} 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>