<template>
	<view class="plateNumber_color_body">
		<view class="plateNumber_color_select">
			<uni-data-select placeholder='牌照底色' class="uni_data_select" :clear="false" v-model="value"
				:localdata="range" @change="change"></uni-data-select>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离 
		},
		data() {
			return {
				value: '',
				range: [{
						value: 0,
						text: "黄"
					},
					{
						value: 1,
						text: "绿"
					},
					{
						value: 2,
						text: "蓝"
					},
				],
			};
		},
		methods: {
			backgroundCallBack(){
				if(this.value!==''){
					return `${this.range[Number(this.value)].text}色`
				}else{
					throw Error('牌照底色不能为空')
				    return false
				}
			},
			change(e) {
				console.log("e:", e);
			},
		},
	};
</script>

<style>
	.uni-select__input-box {
		text-align: center;
	}

	.uni-select {
		border: 0px;
		border-radius: 0px;
	}

	.plateNumber_color_select {
		width: 100%
	}

	.plateNumber_color_body {
		height: 80rpx;
		width: 200rpx;
		border-radius: 10px;
		background-color: #FFFFFF;
		border-radius: 10px;
		display: flex;
		align-items: center;
	}
</style>