uniapp vue3 setup 使用 uni-popup 在 h5 端无法打开的解决方案
bug 描述：popup 组件在 h5 端找不到 open() / close()，在小程序端正常：
TypeError: popup.value.open is not a function
一、问题复现
在 Vue3 + setup 语法下，我这样写 popup：
<template>
<button @click.stop="openPopup">打开</button>
<button @click.stop="closePopup">关闭</button>
<uni-popup ref="popupRef" type="bottom">
<view>123123</view>
<view>123123</view>
<view>123123</view>
<view>123123</view>
<view>123123</view>
</uni-popup>
</template>
<script setup>
import { ref } from 'vue'
//#region popup
const popupRef = ref(null)
const openPopup = () => {
popupRef.value.open() // 报错：TypeError: popupRef.value.open is not a function
}
const closePopup = () => {
popupRef.value.close() // 报错：TypeError: popupRef.value.open is not a function
}
//#endregion
</script>
二、解决办法——注册该组件
全局注册 uni-popup : 在 main.js 里面
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
// 关键：引入 uni-popup 组件
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
export function createApp() {
const app = createSSRApp(App)
const pinia = createPinia()
app.use(pinia)
// 关键：注册组件
app.component('uni-popup', uniPopup)
return {
app
}
}
// #endif
不知道为什么，我如果setup局部注册该组件的话，在小程序端会不起作用，所以只好全局注册了，如果有解决办法的小伙伴欢迎分享给我哈。
三、解决 BUG：ERR_BLOCKED_BY_CLIENT
如果在浏览器控制台有如下输出：
GET http://localhost:5173/uni_modules/uni-popup/components/uni-popup/keypress.js net::ERR_BLOCKED_BY_CLIENT
就和你浏览器安装的扩展有关了，浏览器插件（AdBlock / uBlock / 隐私插件）把 keypress.js 这个文件给拦截了！！！
因为很多广告脚本会用到 keypress.js 这样的名字
→ 广告过滤插件会直接屏蔽这种文件
→ 导致 uni-popup 在 H5 上 初始化失败
→ 结果 popup 的 open() / setOpen() 方法也无法绑定
所以在这个网站下，浏览器扩展里面 禁用 你下载的这些 拦截广告插件 就可以了。
四、总结
因为很多 UI 组件库（uni-ui / uview-plus 等）在 Vue3 + setup 下，不再自动全局注册。
如果不手动注册：
-
模板里虽然能找到组件
-
但 ref 获取不到组件实例
-
因此没有 open、close 等方法
-
所以 popup.value 还是个普通对象
