uni.showModal自定义样式

### 修改 `uni.showModal` 的样式 在 Uni-app 中，默认的 `uni.showModal` 方法提供了基本的功能，但其样式较为固定。为了实现更灵活的样式定制，可以采用自定义组件的方式替代默认的 `uni.showModal`。 #### 使用全局自定义提示框 通过创建并注册一个全局可用的自定义提示框组件来替换内置的 `uni.showModal` 功能[^1]： ```javascript // main.js 文件中引入并挂载自定义组件 import G_show_modal from '@/components/G_show_modal/g_show_modal.js' Vue.use(G_show_modal); ``` 此方式允许开发者完全控制弹窗的设计与交互逻辑，在实际项目开发过程中更为实用和高效。 #### 创建自定义模态窗口组件 构建一个新的 Vue 组件用于模拟 `showModal` 行为，并在此基础上调整 CSS 样式以满足特定需求[^4]: ```html <!-- components/CustomShowModal.vue --> <template> <view class="custom-modal-mask"> <view class="custom-modal-dialog"> <!-- 定制化的内容区域 --> <text>{{ message }}</text> <!-- 操作按钮组 --> <button @click="handleConfirm">确认</button> <button @click="handleCancel">取消</button> </view> </view> </template> <script> export default { props: ['message'], methods: { handleConfirm() { // 处理确认事件 this.$emit('confirm'); }, handleCancel() { // 处理取消事件 this.$emit('cancel'); } } } </script> <style scoped> /* 添加个性化CSS样式 */ .custom-modal-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .5); } .custom-modal-dialog { width: 80%; margin: auto; padding: 20px; border-radius: 10px; text-align: center; background-color: white; } </style> ``` 随后可以在页面或其他地方调用该组件作为新的对话框解决方案: ```javascript this.$refs.myCustomModal.show({ message: '这是一个测试消息', confirmButtonText: '好的', cancelButtonText: '不了' }); ``` 这种方法不仅能够改变外观设计，还可以扩展更多功能特性，比如动画效果、异步加载数据等高级应用案例[^3]。