vue3 uni-popup

### Vue3 中 `uni-popup` 组件的使用教程 #### 导入并注册 `uni-popup` 为了能够在项目中使用 `uni-popup`，需要先安装 UniApp 并导入该组件。对于基于 Vue 3 的应用，在项目的入口文件（通常是 `main.js` 或者 `main.ts`）里完成全局配置： ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 引入 uniapp ui 库 import uniui from '@dcloudio/uni-ui'; const app = createApp(App); app.use(uniui); // 注册 uniapp UI库 app.mount('#app'); ``` 注意这里并没有直接在 Vue 原型上挂载 `$popup` 方法[^1]，因为这是针对 Vue 2.x 版本的做法。 #### 创建包含 `uni-popup` 的页面模板 下面是一个简单的 HTML 结构例子，展示了如何定义一个按钮来触发弹窗显示，并且包含了实际的 `uni-popu`p 组件结构： ```html <template> <view class="content"> <!-- 触发器 --> <button type="primary" @click="showPopup">打开弹窗</button> <!-- 弹窗本身 --> <uni-popup ref="popupRef" :type="'center'"> <view style="padding: 20px;"> 这是一条消息... <br /> <button size="mini" @click="closePopup()">关闭</button> </view> </uni-popup> </view> </template> ``` #### 编写 JavaScript 部分逻辑处理函数 接下来是在 `<script>` 标签内编写用于控制弹窗行为的方法： ```javascript <script setup lang="ts"> import { ref, onMounted } from 'vue'; let popupRef = ref(null); function showPopup() { popupRef.value.open(); } function closePopup() { popupRef.value.close(); } </script> ``` 上述代码片段实现了两个功能：一是当用户点击“打开弹窗”的时候会调用 `open()` 函数显示出 `uni-popup`;二是提供了关闭当前活动中的任何类型的 `uni-popup` 实例的能力。 #### 解决滚动冲突问题 如果遇到像引用描述的情况——即希望阻止背景页面随同弹出窗口一起滚动，则可以在样式表中加入特定的选择器规则以禁用这种交互效果[^3]: ```css /* 添加此 CSS 可防止底层页面跟随弹窗一同上下移动 */ body.popup-opened { overflow: hidden; } ``` 同时还需要确保每当开启一个新的 `uni-popup` 时给 body 加上 `.popup-opened` 类名，并在其被隐藏之后移除它。这可以通过监听 `opened` 和 `closed` 事件实现: ```javascript watch(() => props.show, (newVal) => { document.body.classList[newVal ? "add" : "remove"]('popup-opened') }) ``` 以上就是有关于 Vue3 下 `uni-popup` 组件的基础介绍及其常见应用场景下的解决方案概述。