<!-- 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>