uniapp多按钮弹窗

### 创建带有多个按钮的自定义弹窗组件 在 UniApp 中创建带有多按钮的自定义弹窗组件可以通过封装 Vue 组件的方式实现。以下是详细的说明和代码示例。 #### 1. 定义组件结构 为了使弹窗更加灵活，可以设计一个支持动态传入按钮配置的组件。通过 `props` 接收外部参数来控制显示的内容、样式以及回调函数。 ```vue <template> <view v-if="visible" class="custom-dialog"> <view class="dialog-content"> <text class="title">{{ title }}</text> <text class="message">{{ message }}</text> <view class="button-container"> <button v-for="(btn, index) in buttons" :key="index" :class="'dialog-button ' + btn.class" @click="handleButtonClick(btn.callback)" > {{ btn.text }} </button> </view> </view> </view> </template> <script> export default { props: { visible: { type: Boolean, required: true }, // 控制弹窗显隐 title: { type: String, default: '' }, // 弹窗标题 message: { type: String, default: '' }, // 提示消息 buttons: { type: Array, required: true } // 按钮数组配置 }, methods: { handleButtonClick(callback) { if (typeof callback === 'function') { callback(); // 执行对应的回调逻辑 } this.$emit('close'); // 关闭弹窗 } } }; </script> <style scoped> .custom-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .dialog-content { background-color: white; padding: 20px; border-radius: 8px; text-align: center; } .title { font-size: 18px; margin-bottom: 10px; } .message { font-size: 14px; color: gray; margin-bottom: 20px; } .button-container { display: flex; gap: 10px; /* 设置按钮之间的间距 */ } .dialog-button { padding: 10px 20px; border-radius: 5px; font-size: 16px; } </style> ``` 此模板允许开发者通过传递不同的 `buttons` 配置来自定义每个按钮的行为和外观[^1]。 --- #### 2. 使用组件 在父组件中引入并注册该自定义弹窗组件，然后通过事件绑定和数据交互完成其调用。 ```vue <template> <view> <button @click="showDialog">打开弹窗</button> <CustomDialog :visible="isDialogVisible" :title="dialogTitle" :message="dialogMessage" :buttons="dialogButtons" @close="hideDialog" /> </view> </template> <script> import CustomDialog from './components/CustomDialog.vue'; export default { components: { CustomDialog }, data() { return { isDialogVisible: false, dialogTitle: '重要通知', dialogMessage: '您确定要执行此操作吗?', dialogButtons: [ { text: '取消', class: 'cancel-btn', callback: () => console.log('点击了取消') }, { text: '确认', class: 'confirm-btn', callback: () => console.log('点击了确认') } ] }; }, methods: { showDialog() { this.isDialogVisible = true; }, hideDialog() { this.isDialogVisible = false; } } }; </script> ``` 上述代码展示了如何通过设置 `buttons` 属性向弹窗添加不同功能的按钮，并为其分配独立的回调处理程序[^3]。 --- #### 3. 动画效果增强体验 如果希望进一步提升用户体验，可以在弹窗进入或退出时加入简单的过渡动画。例如： ```css /* 添加淡入淡出动画 */ .custom-dialog-enter-active, .custom-dialog-leave-active { transition: opacity 0.3s ease-in-out; } .custom-dialog-enter-from, .custom-dialog-leave-to { opacity: 0; } ``` 结合 Vue 的 `<transition>` 标签即可轻松实现平滑切换效果[^2]。 --- ### 总结 以上方案提供了一种通用的方法，在 UniApp 平台上构建具有多按钮选项的高度可定制化弹窗组件。它不仅能够满足基本需求，还具备良好的扩展性和灵活性。