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