uniapp封装全局弹框

### 实现全局弹窗组件 为了在 UniApp 中创建并使用自定义的全局弹窗组件，可以按照如下方法操作： #### 创建自定义弹窗组件 `GlobalDialog` 首先，在项目中的 components 文件夹下新建一个名为 GlobalDialog.vue 的文件来编写自定义弹窗逻辑。 ```vue <template> <view v-if="visible" class="dialog-mask"> <view class="dialog-content"> <text>{{ title }}</text> <text>{{ content }}</text> <view v-if="cancelText" class="btn" :style="{ color: cancelColor, background: cancelBackgroundColor }" @click.stop="handleClick('cancel')">{{ cancelText }} </view> <view class="btn" :style="{ color: confirmColor, background: confirmBackgroundColor }" @click.stop="handleClick('confirm')">{{ confirmText }} </view> </view> </view> </template> <script> export default { props: ['title', 'content', 'cancelText', 'confirmText', 'cancelColor', 'confirmColor', 'cancelBackgroundColor', 'confirmBackgroundColor'], data() { return { visible: false, }; }, methods: { handleClick(type) { this.$emit(`on${type.charAt(0).toUpperCase()}${type.slice(1)}`); this.visible = false; } } }; </script> <style scoped> /* 定义样式 */ .dialog-mask { /* ... */ } .dialog-content { /* ... */ } .btn { /* ... */ } </style> ``` 此部分代码展示了如何构建带有条件渲染取消按钮功能的基础结构[^1]。 #### 注册为全局组件 接着，在 main.js 或 app.vue 中注册该组件以便在整个应用程序范围内调用它。 ```javascript import Vue from 'vue'; import GlobalDialog from '@/components/GlobalDialog'; Vue.component('global-dialog', GlobalDialog); new Vue({ el: '#app' }); ``` 通过这种方式使得 `global-dialog` 可用于任何页面或子组件内。 #### 使用方式 最后，在需要展示对话框的地方引入并配置参数即可触发显示效果。例如在一个具体的 .vue 页面里这样写： ```html <!-- somePage.vue --> <template> <!-- 其他模板代码... --> <button type="primary" @tap="showCustomDialog">打开弹窗</button> <global-dialog ref="customDialog" :title="'提示'" :content="'这是一条消息'" :cancel-text="'关闭'" :confirm-text="'知道了'" /> </template> <script> export default { methods: { showCustomDialog() { const dialogInstance = this.$refs.customDialog; dialogInstance.visible = true; // 绑定事件处理程序 dialogInstance.$once('OnConfirm', () => console.log('用户点击了确认')); dialogInstance.$once('OnCancel', () => console.log('用户点击了取消')); } } } </script> ``` 上述实例说明了怎样利用属性绑定传递数据给子组件以及监听特定动作的发生。