uni-app里用v-model还是props控制显隐？
直接用 v-model 最省事，但必须确保组件内部正确触发 update:visible 事件。很多初学者写成 this.$emit('input', false) 或漏掉 update: 前缀，导致父组件绑定失效。
推荐写法：在子组件 props 中声明 visible，并在遮罩层点击、关闭按钮等逻辑里统一触发 this.$emit('update:visible', false)。Vue 3 的 defineModel 也可用，但需注意 uni-app 对 Vue 3 的兼容性（尤其 H5 端）。
- 小程序端不支持
defineModel的自动解构，建议坚持传统update:xxx模式 - 如果用
v-if控制组件挂载，注意动画过渡可能失效；v-show更稳妥，但 DOM 会常驻 - 遮罩层
@click触发关闭时，记得加.stop防止事件冒泡到内容区
如何让Modal在任意页面/JS文件中调用？
靠全局方法 + Vuex/Pinia 状态管理是最通用的方案。uni-app 不支持像 Vue 3 的 createApp().mount() 动态挂载，所以不能纯靠 JS 创建实例。
关键点是把 Modal 组件注册为全局组件，并通过 store 控制其状态。例如在 store/modal.js 中定义 show、title、content、success 回调等字段，再在 main.js 中通过 Vue.prototype.$showModal = function(option) { store.commit('showModal', option) } 暴露方法。
- 调用时传入对象，不要传字符串或布尔值：
this.$showModal({ title: '提示', content: '确定删除？', success: (res) => { if(res.confirm) {...} } }) - 微信小程序中隐藏 tabbar 需手动调用
wx.hideTabBar()，且要在#ifndef H5条件编译下，否则 H5 报错 - 回调函数不能是箭头函数（会丢失
this上下文），且必须在 commit 前存入 state，避免异步执行时被覆盖
自定义Modal在不同平台样式错位怎么办？
核心问题是 fixed 定位在小程序和 H5 渲染机制不同。H5 下 position: fixed 相对于视口，而小程序中它可能被包裹容器截断或受 scroll-view 影响。
最稳方案是用 position: absolute + top: 0; left: 0; width: 100%; height: 100%，并确保父级没有 overflow: hidden。同时遮罩层和内容层都设高 z-index（如 9999），避免被导航栏或下拉刷新盖住。
- 内容居中别只靠
transform: translate(-50%, -50%)，iOS 小程序偶尔会渲染偏移，建议加top: 50vh; left: 50vw;双保险 - 圆角、阴影在 Android 小程序里默认不生效，需加
-webkit-mask或用图片模拟 - 字体大小统一用
rpx，但标题行高建议固定line-height: 1.4，避免多行时高度计算异常
为什么点击确认后Modal没消失，或者回调不执行？
最常见的原因是 success 回调被覆盖或未正确绑定。Vuex store 中若用 Object.assign(state, data)，当 data 缺失 success 字段时，原 state.success 会被清空为 undefined。
务必在 commit 前做浅拷贝并保留原有回调：state.modal = { ...state.modal, ...data }，而不是 Object.assign(state.modal, data)。
- 确认按钮点击后必须显式调用
store.commit('hideModal')，不能只改show字段 - 回调参数结构要和文档一致：uni-app 官方
uni.showModal返回{ confirm: true/false, cancel: true/false }，你的组件也得保持这个 shape - 如果用了
uni.navigateTo后立即弹窗，部分安卓机有渲染延迟，建议加setTimeout(() => this.$showModal(...), 100)
