uni.showModal 不支持样式定制，多端需用.nvue页面模拟或封装custom-modal.vue组件，配合Pinia管理状态避免内存泄漏。
uni.showModal 无法直接改样式，别硬套 CSS
原生 uni.showModal 是平台级 API，不是 Vue 组件，不支持 class、style 或插槽。你在 page.json 或 app.vue 里加 .uni-modal 类，只在 H5 有效；小程序和 App 端基本无效，尤其 iOS 微信、支付宝等环境会完全忽略。
常见错误现象：content 里写 <p style="color:red">xxx</p> 在部分安卓机上能生效，但在 iOS 上字体颜色、行高、内边距全被重置，且无法控制按钮背景色或圆角。
- 不要试图用
/deep/或::v-deep覆盖uni.showModal的内部节点——它压根没挂载到当前组件 DOM 树中 - 不要在
common/style.scss里全局覆盖.uni-modal__bd，这会导致 H5 正常、小程序失效、App 端报错或白屏 - 如果项目已上线且只跑 H5，可临时用全局样式微调；但凡要多端一致，必须放弃原生 API
用 .nvue 页面模拟 Modal，解决 App 端透明背景问题
App 端（iOS/Android）真正可控的方式是跳转一个透明背景的 .nvue 页面，本质是“伪弹窗”。关键点不在页面内容，而在 pages.json 配置：
{
"path": "components/modal/confirm",
"style": {
"navigationStyle": "custom",
"app-plus": {
"animationType": "fade-in",
"background": "transparent",
"backgroundColor": "rgba(0,0,0,0.5)",
"popGesture": "none"
}
}
}
注意：background: "transparent" 必须配合 backgroundColor 使用，否则 iOS 下会变黑底；popGesture: "none" 是防止用户右滑返回导致逻辑中断。
-
.nvue文件内需用flex+absolute手动居中内容，不能依赖margin: auto - 传参用 URL query（如
?title=xxx&content=yyy），避免跨页面通信状态丢失 - 回调必须用
uni.$emit/uni.$on，不能依赖success回调——因为这不是 API 调用，而是路由跳转
封装 Vue 组件 Modal，用 v-model + teleport 实现跨层级渲染
推荐方案：新建 components/custom-modal.vue，用 v-model:show 控制显隐，内部用 <teleport to="body"></teleport>（H5）或 <cover-view></cover-view>（小程序）确保层级最高：
<template>
<teleport to="body">
<view v-if="show" class="modal-overlay">
<view class="modal-box">
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</view>
</view>
</teleport>
</template>
这样做的好处是：样式完全自由（圆角、阴影、动画）、支持富文本/图标/表单、可复用、便于主题切换。
- 小程序端必须用
<cover-view></cover-view>替代<view></view>，否则遮罩层会被scroll-view或map组件穿透 - H5 端记得给
.modal-overlay加position: fixed; top: 0; left: 0; z-index: 9999，否则可能被其他 absolute 元素盖住 - 动画要用
<transition></transition>+transform: scale()，避免触发布局重排影响性能
全局状态管理 modal，避免重复实例和内存泄漏
多个页面同时调用弹窗时，容易出现遮罩层叠加、关闭逻辑错乱。建议用 Pinia（或 Vuex）建一个 modalStore：
export const useModalStore = defineStore('modal', {
state: () => ({
visible: false,
title: '',
content: '',
onConfirm: null,
onCancel: null
}),
actions: {
show(options) {
Object.assign(this, options)
this.visible = true
},
hide() {
this.visible = false
// 清空回调引用，防止闭包持有组件实例
this.onConfirm = null
this.onCancel = null
}
}
})
调用时统一走 useModalStore().show({ title: 'xxx', onConfirm: () => { ... } })，而不是每个页面都 new 一个实例。
容易被忽略的点：未清除 onConfirm / onCancel 引用，会导致目标组件卸载后回调仍被触发，引发 Cannot read property 'xxx' of null 错误。
