【微信小程序-uniapp】CustomDialog 居中弹窗组件

**CustomDialog 组件**

在微信小程序开发中，弹窗是非常常见的UI元素。然而，微信小程序提供的原生 `showModal` 方法虽然方便，但其弹窗样式和布局无法满足所有需求。因此，我们需要自定义一个弹窗组件来实现更灵活的布局和样式。

**CustomDialog 组件代码**

html<!-- custom-dialog.vue -->
<template>
 <view class="custom-dialog" :class="{ 'is-center': isCenter }">
 <!-- 弹窗内容区域 -->
 <slot name="content"></slot>
 <!-- 弹窗底部按钮区域 -->
 <view class="dialog-footer">
 <button v-for="(item, index) in footerButtons" :key="index" @tap="handleFooterButtonTap(index)">
 {{ item.text }}
 </button>
 </view>
 </view>
</template>

<script>
export default {
 props: {
 // 是否居中显示弹窗 isCenter: {
 type: Boolean,
 default: false },
 // 弹窗底部按钮列表 footerButtons: {
 type: Array,
 default() {
 return []
 }
 }
 },
 methods: {
 // 处理弹窗底部按钮点击事件 handleFooterButtonTap(index) {
 this.$emit('footer-button-tap', index)
 }
 }
}
</script>

<style>
.custom-dialog {
 position: fixed;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 background-color: #fff;
 border-radius:10px;
 padding:20px;
}

.custom-dialog.is-center {
 left:0;
 right:0;
 margin-left: auto;
 margin-right: auto;
}

.dialog-footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top:10px;
}
</style>

html<!-- index.vue -->
<template>
 <view>
 <!-- 弹窗内容区域 -->
 <custom-dialog is-center @footer-button-tap="handleFooterButtonTap">
 <view class="content">
 <text>这是弹窗的内容区域</text>
 </view>
 <!-- 弹窗底部按钮区域 -->
 <template v-slot:footer>
 <button @tap="handleConfirm">确认</button>
 <button @tap="handleCancel">取消</button>
 </template>
 </custom-dialog>
 </view>
</template>

<script>
import CustomDialog from './custom-dialog.vue'

export default {
 components: { CustomDialog },
 methods: {
 handleFooterButtonTap(index) {
 console.log('弹窗底部按钮点击事件', index)
 },
 handleConfirm() {
 console.log('确认按钮点击事件')
 },
 handleCancel() {
 console.log('取消按钮点击事件')
 }
 }
}
</script>

<style>
.content {
 padding:20px;
}
</style>