uniapp ts uni-popup

### 如何在Vue3中使用UniApp的uni-popup组件 #### 安装依赖项 为了能够在项目中使用 `uni-popup` 组件，首先需要安装 UniApp 的 CLI 工具以及初始化一个新的 UniApp 项目。如果已经拥有一个现成的 Vue3 和 UniApp 集成环境，则可以跳过这一步。 对于新项目的创建，可以通过命令行工具执行如下操作来快速搭建开发框架[^1]: ```bash vue create my-project-name cd my-project-name npm install @dcloudio/uni-app -S ``` #### 导入并注册uni-popup组件 为了让应用程序能够识别和渲染 `uni-popup`，需将其导入到页面或全局配置文件内，并完成必要的声明工作。通常情况下，在单页应用(SPA)模式下推荐局部引入的方式；而对于多页面(MPA)，则更适合采用全局方式加载该插件[^2]。 以下是通过脚本标签形式直接嵌套于目标.vue 文件中的实例代码片段： ```html <template> <!-- 使用弹窗 --> </template> <script setup lang="ts"> import { ref } from 'vue'; // 局部注册 uni-popup 组件 import Popup from '@/components/uni-popup/uni-popup.vue'; const showPopup = () => { popupRef.value.open(); }; const closePopup = () => { popupRef.value.close(); }; const popupRef = ref(null); </script> <template> <view class="content"> <button type="primary" @click="showPopup">显示popup</button> <Popup ref="popupRef"></Popup> </view> </template> ``` 上述例子展示了如何定义两个方法 (`showPopup`, `closePopup`) 来控制弹层的状态切换逻辑，同时也说明了怎样利用模板语法绑定事件处理器实现交互功能[^3]。 #### 自定义样式与属性设置 除了基本的功能外，还可以根据实际需求调整 `uni-popup` 外观特性及其行为参数。比如改变背景颜色、指定动画效果类型或是设定初始宽度高度等。这些自定义选项都可以作为 props 传递给子组件来进行个性化定制[^4]。 例如修改默认关闭按钮图标位置： ```html <Popup :mask-closeable="false" position="bottom" custom-style="border-radius: 8px;" title="提示信息" icon-position="left"> </Popup> ```

### 实现 UniApp 中 uni-popup 底部弹出自定义业务内容并覆盖底部 TabBar 的方法 在 UniApp 中实现点击按钮后通过 `uni-popup` 在页面底部弹出并覆盖底部 TabBar 的效果，可以通过以下方式完成。此实现结合了逻辑代码和配置文件的调整。 #### 1. 页面逻辑代码 在 Vue 组件中使用 `uni-popup` 并绑定相关事件以控制弹窗的显示与隐藏。以下是完整的逻辑代码： ```javascript <script lang="ts" setup> import { ref } from 'vue'; // 定义弹出层的引用 const popupRef = ref(null); // 点击按钮时调用的方法 function openPopup() { // 打开弹出层 popupRef.value.open(); // 隐藏底部导航 uni.hideTabBar(); } // 关闭弹出层时显示底部导航栏 function closePopup() { // 关闭弹出层 popupRef.value.close(); // 显示底部导航 uni.showTabBar(); } // 自定义业务内容 const menuItems = ref([ { icon: '/static/my/one.png', text: '个人信息' }, { icon: '/static/my/two.png', text: '浏览历史' }, { icon: '/static/my/three.png', text: '我的收藏' }, { icon: '/static/my/four.png', text: '退出登录' } ]); </script> <template> <view> <!-- 按钮触发弹出 --> <button @click="openPopup">打开底部弹出框</button> <!-- 弹出层组件 --> <uni-popup ref="popupRef" type="bottom"> <view class="custom-content"> <block v-for="(item, index) in menuItems" :key="index"> <view class="menu-item"> <image :src="item.icon" mode="aspectFit"></image> <text>{{ item.text }}</text> </view> </block> </view> </uni-popup> </view> </template> <style scoped> .custom-content { background-color: #fff; padding: 20px; } .menu-item { display: flex; align-items: center; margin-bottom: 10px; } .menu-item image { width: 30px; height: 30px; margin-right: 10px; } </style> ``` 以上代码实现了点击按钮后弹出底部 `uni-popup`，并隐藏底部 TabBar 的功能[^1]。 #### 2. 配置 pages.json 文件 为了确保弹出层能够正确覆盖原生 TabBar 和导航栏，需要对 `pages.json` 进行适当配置。以下是示例配置： ```json { "pages": [ { "path": "pages/index/index", "style": { "app-plus": { "scrollIndicator": "none", "bounce": "none", "safearea": { "bottom": { "offset": "none" } }, "subNVues": [ { "id": "fullpopup", "path": "pages/components/full-popup/full-popup", "type": "popup", // 设置类型为弹窗 "style": { "position": "popup", // 定位为弹窗 "background": "rgba(0,0,0,0.1)" // 设置背景色 } } ] } } } ] } ``` 通过上述配置，可以确保弹出层不会被原生 TabBar 或导航栏遮挡[^2]。 #### 3. Webview 样式调整 如果需要进一步调整 Webview 的侧滑返回效果，可以通过 `WebviewStyle` 的 `popGesture` 属性进行设置。例如，禁用侧滑返回功能以避免干扰弹出层操作： ```json "webviewStyle": { "popGesture": "none" // 禁用侧滑返回功能 } ``` 此配置可防止用户在弹出层显示时通过侧滑关闭页面[^3]。 --- ###