uniapp自定义弹框

### 如何在 UniApp 中实现自定义弹框 #### 创建自定义弹窗组件 为了实现在 UniApp 应用程序中的自定义弹框，可以创建一个新的 Vue 组件作为弹窗。此过程涉及模板设计、样式编写以及逻辑处理。 ```html <template> <view v-if="visible" class="custom-modal"> <!-- 遮罩层 --> <view @click="handleClose" class="mask"></view> <!-- 弹窗主体 --> <view :style="{ height: modalHeight }" class="modal-content"> <slot></slot> <!-- 插槽用于放置具体的内容 --> <!-- 关闭按钮 --> <button type="primary" size="mini" @click.stop="handleClose">关闭</button> </view> </view> </template> <script> export default { props: { visible: Boolean, // 控制显示隐藏 maxHeightPercentage: { // 设置最大高度百分比，默认80% type: Number, default: 80 } }, computed: { modalHeight() { const percentage = this.maxHeightPercentage; return `${percentage}%`; } }, methods: { handleClose() { this.$emit('update:visible', false); } } }; </script> <style scoped> .custom-modal .mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ } .custom-modal .modal-content { position: absolute; width: 90%; max-width: 400px; /* 可选的最大宽度 */ margin: auto; top: 10%; /* 调整垂直居中位置 */ left: 0; right: 0; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); z-index: 1000; } </style> ``` 上述代码展示了如何构建一个基本的可重用自定义弹窗组件[^2]。该组件接受两个属性 `visible` 和 `maxHeightPercentage` 来控制其可见性和大小比例，并提供插槽以便于灵活填充内部内容。 当需要展示这个自定义弹窗时，在父级页面引入并注册此组件即可： ```html <!-- ParentPage.vue 文件片段 --> <CustomModal :visible.sync="isShowModal" /> <button @click="toggleModal">打开模态框</button> <script> import CustomModal from './components/CustomModal'; export default { components: { CustomModal }, data() { return { isShowModal: false }; }, methods: { toggleModal() { this.isShowModal = !this.isShowModal; } } }; </script> ``` 这样就完成了一个简单的自定义弹窗功能开发案例。