子组件
< template>
< div class = "bottom-modal" : class = "{'show': showModal}" >
< div class = "modal-content" : class = "{'show': showModal}" >
< ! -- 内容区域 -- >
< slot> < / slot>
< / div>
< / div>
< / template>
< script>
export default {
name : 'BottomModal' ,
props : {
showModal : {
type : Boolean,
default : false
}
} ,
methods : {
}
}
< / script>
< style lang= "scss" >
. bottom- modal {
position : fixed;
left : 0 ;
bottom : 0 ;
width : 100 % ;
height : 0 ;
background- color: rgba ( 0 , 0 , 0 , 0.5 ) ;
overflow : hidden;
transition : height 0 . 2s ease- out;
z- index: 99 ;
}
. bottom- modal. show {
height : 100 % ;
}
. modal- content {
background- color: #fff;
border- top- left- radius: 10px;
border- top- right- radius: 10px;
box- shadow: 0px - 2px 10px rgba ( 0 , 0 , 0 , 0.1 ) ;
padding : 16px;
position : absolute;
left : 0 ;
bottom : 0 ;
box- sizing: border- box;
width : 100 % ;
z- index: 999 ;
height : 0 ;
transition : all 0 . 5s linear;
}
. modal- content. show {
height : 60vh;
}
. modal- mask {
position : absolute;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
}
< / style>
父组件
< script>
import BottomModal from "@/components/BottomModal.vue"
export default {
components : {
BottomModal
} ,
data ( ) {
return {
showModal : false
}
} ,
methods : {
radioChange ( e ) {
console. log ( "radioChange" , e. detail. value)
}
}
}
< / script>
< template>
< bottom- modal : showModal= "showModal" >
< view class = "my-modal" >
< text class = "title" > 订单取消< / text>
< text> 请选择取消订单的原因:< / text>
< radio- group @change= "radioChange" >
< view>
< label class = "item" >
< text> 商品无货< / text>
< radio : value= "1" style= "transform: scale(0.6)" / >
< / label>
< / view>
< view>
< label class = "item" >
< text> 不想要了< / text>
< radio : value= "2" style= "transform: scale(0.6)" / >
< / label>
< / view>
< view>
< label class = "item" >
< text> 商品信息填错了< / text>
< radio : value= "3" style= "transform: scale(0.6)" / >
< / label>
< / view>
< view>
< label class = "item" >
< text> 地址信息填写错误< / text>
< radio : value= "4" style= "transform: scale(0.6)" / >
< / label>
< / view>
< view>
< label class = "item" >
< text> 商品降价< / text>
< radio : value= "5" style= "transform: scale(0.6)" / >
< / label>
< / view>
< view>
< label class = "item" >
< text> 其它< / text>
< radio : value= "6" style= "transform: scale(0.6)" / >
< / label>
< / view>
< / radio- group>
< view class = "cancel-confirm" >
< text @click= "handleCancel" > 取消< / text>
< text @click= "handleConfirm" class = "confirm" > 确认< / text>
< / view>
< / view>
< / bottom- modal>
< / template>
< style lang= "scss" >
. my- modal {
display : flex;
flex- direction: column;
font- size: 26rpx;
. item {
display : flex;
justify- content: space- between;
align- items: center;
margin- top: 30rpx;
padding- right: 30rpx;
}
. title {
margin- top: 15rpx;
font- size: 30rpx;
text- align: center;
}
. cancel- confirm {
display : flex;
justify- content: space- around;
margin- top: 30rpx;
text {
width : 300rpx;
height : 60rpx;
line- height: 60rpx;
text- align: center;
border : 1px solid #e6e2e2;
border- radius: 30rpx;
}
. confirm {
background- color: #27BA9B;
border : none;
color : #fff;
}
}
}
< / style>
效果图