当前位置：首页 > news >正文

uni-app封装组件实现下方滑动弹出模态框

news 2025/7/22 0:09:13

子组件

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