子组件
javascript
<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>
父组件
javascript
<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>