uni-popup 不支持动态模糊效果，因其 blureffect 仅适用于 tabbar；需手动组合 mask + view + backdrop-filter 实现，注意兼容性与层级控制。
不能直接用 uni-popup 实现动态模糊效果——它不支持背景模糊，且 blurEffect 是 tabBar 专属配置，与弹出层无关。 想在弹出菜单上叠加高斯模糊，必须手动组合 mask + view + CSS filter，同时避开 uni-popup 的渲染限制。
为什么 uni-popup 的 blurEffect 不生效
blurEffect 只作用于 pages.json 中配置的 tabBar，是原生层渲染的特殊能力；uni-popup 是纯前端组件，其遮罩（mask）和内容区都是普通 DOM/nvue 节点，无法触发系统级模糊。常见错误是误以为设置 type="bottom" 后加 blurEffect 属性就能模糊，实际无效。
- 检查是否把
blurEffect: "extralight"写在了uni-popup标签上 —— 这个属性根本不存在于该组件 API 中 - 确认是否在
manifest.json的app-plus.safearea和pages.json的tabBar下正确配置了模糊 —— 这些只影响 tabBar，不影响弹窗 - 试图用 CSS
backdrop-filter: blur(10px)直接套在uni-popup上？多数安卓 WebView 和微信小程序基础库不支持该属性，或需开启实验性开关
用 mask + view + backdrop-filter 手动实现（H5/小程序兼容写法）
核心思路：不用 uni-popup，改用 <mask></mask> 控制遮罩，用 <view></view> 定义菜单容器，并对其应用模糊。关键在于分层控制与 fallback 处理。
- 遮罩层用
<mask></mask>（小程序原生支持，H5 需降级为<view></view>+ rgba 背景） - 菜单容器设
position: fixed+bottom: 0，并添加style="backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);" - 为 iOS Safari 和部分安卓提供降级：检测
backdrop-filter支持性，不支持时改用半透明白色背景 + 阴影模拟“轻量模糊感” - 避免在
scroll-view内部使用 —— 会导致backdrop-filter失效或滚动卡顿
<!-- 示例结构 --> <mask v-if="showMenu"></mask><view class="menu-wrapper" v-if="showMenu"><view class="menu-content"><text>选项一</text><text>选项二</text></view></view>
对应样式中，.menu-wrapper 加 bottom: var(--window-bottom, 0) 适配 tabBar 高度，.menu-content 加模糊和圆角。
App 端（iOS/Android）的真模糊替代方案
App 端可调用原生能力实现真正高斯模糊，但需插件支持：@dcloudio/uni-ui 不提供，得用第三方如 uni-app-plugin-blur 或自定义原生插件。目前稳定可用的是 uni.createSelectorQuery() + 原生视图截图再模糊，成本高、延迟明显，不推荐用于频繁弹出菜单。
- 更务实的做法：App 端直接用
uni.showActionSheet—— 它底层调用原生 action sheet，在 iOS 上自带毛玻璃效果，无需手动实现 - 若必须自定义，则放弃模糊，改用深色半透明背景 + 微弱阴影（
box-shadow: 0 -2px 12px rgba(0,0,0,0.08)），视觉上更轻量、兼容性更好 - 注意：nvue 页面中
backdrop-filter几乎全平台不支持，必须用纯色背景 + 动画位移模拟“滑出感”
容易被忽略的细节：模糊区域与内容层级冲突
即使 backdrop-filter 生效，菜单内容本身（文字、图标）也可能被模糊掉 —— 因为 filter 作用于整个元素及其子树。解决方法只有两个：
- 把菜单内容抽离到父容器外，用
position: absolute+z-index提升层级，确保它不被模糊层包裹 - 或者，只对遮罩层下方的页面内容做模糊快照（成本极高，仅适合静态首页），菜单本身保持清晰
实践中，90% 的场景只需模糊菜单背后的页面，而非菜单自身；所以把 backdrop-filter 加在菜单容器上，同时确保菜单项用 z-index: 1001 以上，才能既看到模糊背景，又看清文字。
