车牌号上的省会简称;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>