uni-popup 不支持 backdrop-filter，h5/小程序因兼容性差无效，app 端需用 plus.nativeobj.view 原生实现模糊遮罩；其余平台应采用渐变遮罩、阴影和边框等视觉替代方案。
uni-popup 本身不支持背景模糊（backdrop-filter: blur()），H5 和小程序环境对 backdrop-filter 兼容性差，真机上基本不可用；App 端需绕过 WebView 层，用原生能力实现才可靠。
为什么直接加 backdrop-filter 在 H5/小程序里无效
即使你在 <uni-popup></uni-popup> 的遮罩层（mask）或弹层容器上写了 style="backdrop-filter: blur(10px)"，多数情况下：
- H5 端：Chrome Android / iOS Safari 对该属性支持极弱，且需配合
-webkit-backdrop-filter，但 uni-app 的 mask 是动态插入的 DOM，样式常被 scoped 或平台渲染机制剥离 - 微信小程序：不支持
backdrop-filter，连filter都受限，CSS 滤镜完全不可用 - App 端（iOS/Android）：WebView 内核默认禁用该特性，除非你手动启用硬件加速并包裹在
webview特定上下文中——但uni-popup不提供这种控制权
App 端唯一可行方案：用 plus.nativeObj.View 绘制带模糊的遮罩
只有 App 平台能调用 5+ Native API 实现真实高斯模糊。核心思路是：不用 uni-popup，改用 plus.nativeObj.View 手动创建两层——模糊遮罩层 + 底部弹层容器。
- 先创建一个全屏
maskView，设置background: 'rgba(0,0,0,0.4)'，再通过drawBlurRect()（需自定义原生插件或调用 plus 插件扩展）叠加模糊效果；若无插件，可用预渲染模糊图做底图（兼容性妥协） - 再建一个
popupView，top: '60%'、height: '40%'，backgroundColor: '#fff'，内部用drawText()/drawImage()渲染菜单项 - 关键点：
maskView必须在popupView之下（zIndex 更小），且两者都用append()加入当前 webview，不能依赖 Vue 渲染流程 - 关闭时顺序调用
maskView.remove()→popupView.remove()，避免残留
H5/小程序退而求其次：用半透明白色层 + 模拟“视觉模糊感”
放弃真实模糊，用设计手段降低违和感：
- 遮罩层改用
background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.9))，顶部更透、底部稍实，模拟景深 - 弹层容器加
box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.1)，强化“浮起”感，转移对背景的关注 - 弹层内容区域用浅灰渐变边框（如
border-top: 1rpx solid #f0f0f0+border-bottom: 1rpx solid #e0e0e0），制造层次错觉 - 禁止底层滚动：
@touchmove.prevent绑在 mask 上，比overflow: hidden更可靠，尤其在 iOS Safari 中
别踩 ref 和作用域的坑：Vue 3 下 popupRef.value?.close() 不等于 this.popup.close()
如果你硬要用 uni-popup 套壳，又想控制显隐，以下三点必须同步满足：
- 模板中写
<uni-popup ref="popupRef" type="bottom"></uni-popup>，不能漏ref - setup 中声明
const popupRef = ref(null)，且在onMounted后首次调用popupRef.value?.open()，否则值为null - 点击菜单项关闭时，必须用
popupRef.value?.close()，不是popupRef.close()，也不是this.popupRef.close()—— Vue 3 setup 里没有this
真实模糊只存在于 App 原生层，其他端的所有“模糊”都是障眼法。设计时优先考虑遮罩对比度、弹层圆角和动效节奏，比执着于 blur() 更实际。
