车牌号上的省会简称;uni-app组件,vue组件通用，小程序可模仿

<!-- car.vue组件 -->
<template>
	<!-- 我得遮罩层  组件-->
	<view class="car" v-show="isShow">
		<view class="zhezhao" @tap="close">
			<view class="box" @tap.stop="stop">
				<view class="item" v-for="(item, index) in city" :key="index" @tap="choose(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			city: [
				'京',
				'沪',
				'浙',
				'苏',
				'粤',
				'鲁',
				'晋',
				'冀',
				'豫',
				'川',
				'渝',
				'辽',
				'吉',
				'黑',
				'皖',
				'鄂',
				'津',
				'贵',
				'云',
				'桂',
				'琼',
				'青',
				'新',
				'藏',
				'蒙',
				'宁',
				'甘',
				'陕',
				'闽',
				'赣',
				'湘'
			],
			// name:'',
			isShow:false
		};
	},
	methods: {
		choose(item){
			// 把这个值暴漏出去也就是给父组件让它yong
			console.log(item)
			// this.name = item
			// 再手动关闭
			this.$emit('carFang',item)	//调用父组件函数把选好的城市名传过去
			this.close()
		},
		close(){
			this.isShow=false
			
		},
		show(){
			this.isShow=true    //显示
		},
		stop(){
			console.log('阻止冒泡,不让点击剩余部分关闭')
		}
	}
};
</script>

<style lang="scss" scoped>
// my zhezhao
.zhezhao {
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
}
.box {
	position: absolute;
	bottom: 0;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	padding-left: 23upx;
	background:#c6c6c6;
}
.item {
	width: 80upx;
	height: 60upx;
	background: #eee;
	box-shadow: 0upx 5upx 0upx 0upx #666;
	border: 2px solid #fff;
	margin: 10upx;
	border-radius: 5upx;
	text-align: center;
	font-size: 24upx;
	line-height: 60upx;
}
</style>

父组件使用:

<text class="chepai">车牌号码</text>
<text class="city" @tap="choseCity">{{cityName}} ></text>
<car ref="carName" @carFang="carFang"></car>

<script>
	import car from '../../components/car.vue'
	export default {
		data(){
			return {
				cityName:'豫'	// 写个默认值 
			}
		},
		components: {
			car
		},
		methods: {
			carFang(e){
				console.log(e)
				this.cityName=e				// 用来接收选择好的城市名
			},
			choseCity(){
				// 
				this.$refs.carName.show()	

			}
		}
	}
</script>