appvue中使用自定义模态弹框uniapp

### 创建和使用自定义模态弹框 在 UniApp 框架下，通过 Vue 的组件化机制可以轻松实现自定义模态弹框。以下是具体方法： #### 1. 自定义模态弹框组件设计 创建一个新的 Vue 组件文件 `uniPop.vue` 来封装模态弹框逻辑。 ```vue <template> <view v-if="visible" class="modal-container"> <view class="mask" @click="handleMaskClick"></view> <view class="popup-content" :class="'animation-' + animationType"> <slot name="header"><text class="title">{{ title }}</text></slot> <slot><text>{{ content }}</text></slot> <view class="buttons"> <button v-if="cancelText" @click="clickBtn('cancel')" :style="{ color: cancelColor, background: cancelBackgroundColor }">{{ cancelText }}</button> <button v-if="confirmText" @click="clickBtn('confirm')" :style="{ color: confirmColor, background: confirmBackgroundColor }">{{ confirmText }}</button> </view> </view> </view> </template> <script> export default { props: { visible: Boolean, title: String, content: String, cancelText: String, confirmText: String, cancelColor: String, confirmColor: String, cancelBackgroundColor: String, confirmBackgroundColor: String, animationType: { type: String, default: 'fade' }, maskClosable: { type: Boolean, default: true } }, methods: { handleMaskClick() { if (this.maskClosable) this.$emit('update:visible', false); }, clickBtn(type) { this.$emit(`on-${type}`); this.$emit('update:visible', false); } } }; </script> <style scoped> .modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .popup-content { padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); background-color: white; text-align: center; } .buttons button { margin: 5px; } .animation-fade { opacity: 1; transition: all 0.3s ease-in-out; } .animation-slide-up { transform: translateY(-10%); transition: all 0.3s ease-in-out; } </style> ``` 此代码片段展示了如何构建一个支持动画、按钮配置以及遮罩层交互的通用模态弹框[^1]。 --- #### 2. 注册并引入组件到 AppVue 文件中 在项目的入口文件 `App.vue` 或其他页面中注册该组件，并绑定数据属性来控制其行为。 ```javascript import uniPop from '@/components/uniPop/uniPop.vue'; export default { data() { return { showModal: false, popupTitle: '提示', popupContent: '这是一个自定义模态弹框示例。', cancelText: '取消', confirmText: '确认', cancelColor: '#ff0000', confirmColor: '#007aff', cancelBackgroundColor: '#ffffff', confirmBackgroundColor: '#eaeaea' }; }, components: { uniPop }, methods: { openPopup() { this.showModal = true; }, closePopup() { this.showModal = false; }, onConfirm() { console.log('用户点击了确认'); }, onCancel() { console.log('用户点击了取消'); } } }; ``` 在此部分中，我们设置了用于管理模态弹框状态的数据字段，并提供了打开和关闭的方法[^2]。 --- #### 3. 使用模态弹框组件 在模板区域嵌入 `<uni-pop>` 并传递所需参数。 ```html <template> <view class="container"> <!-- 页面内容 --> <button @click="openPopup">显示弹窗</button> <!-- 弹窗模板 --> <uni-pop :visible.sync="showModal" :title="popupTitle" :content="popupContent" :cancel-text="cancelText" :confirm-text="confirmText" :cancel-color="cancelColor" :confirm-color="confirmColor" :cancel-background-color="cancelBackgroundColor" :confirm-background-color="confirmBackgroundColor" @on-confirm="onConfirm" @on-cancel="onCancel" ></uni-pop> </view> </template> ``` 这段代码实现了动态加载模态弹框的功能，允许开发者灵活调整外观与功能[^3]。 --- #### 注意事项 - **性能优化**：如果应用频繁调用多个不同类型的弹框，则建议采用单例模式减少重复渲染开销。 - **跨平台适配**：针对 Android 和 iOS 不同设备风格需求，可通过条件编译设置差异化样式。 ---