<!-- 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){// 把這個值暴漏出去也就是給父組件讓它yongconsole.log(item)// this.name = item// 再手動關(guān)閉this.$emit('carFang',item) //調(diào)用父組件函數(shù)把選好的城市名傳過去this.close()},close(){this.isShow=false},show(){this.isShow=true //顯示},stop(){console.log('阻止冒泡,不讓點擊剩余部分關(guān)閉')}} }; </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>

總結(jié)

以上是生活随笔為你收集整理的车牌号上的省会简称;uni-app组件,vue组件通用，小程序可模仿的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。