【Uniapp-Vue3】解决uni-popup弹窗在安全区显示透明问题

我们在使用uni-popup时,如果想要给弹出内容添加一个背景颜色,我们会发现在安全区域是不显示该背景颜色的。

首先根据如下的目录结构找到uni-popup.vue文件

在该文件中找到bottom配置,将红箭头所指代码注释掉

下面的安全区域就没有了,但是还没解决完。 

 

在弹出区域下面加上一个类名为safe-area-bottom的盒子:

在CSS中进行配置: 

// 底部安全区域
.safe-area-bottom{
	width: 100%;
	height: env(safe-area-inset-bottom);
	background-color: #fff;
}

成功解决 

### 如何在Vue3中使用UniAppuni-popup组件 #### 安装依赖项 为了能够在项目中使用 `uni-popup` 组件,首先需要安装 UniApp 的 CLI 工具以及初始化一个新的 UniApp 项目。如果已经拥有一个现成的 Vue3UniApp 集成环境,则可以跳过这一步。 对于新项目的创建,可以通过命令行工具执行如下操作来快速搭建开发框架[^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 &#39;vue&#39;; // 局部注册 uni-popup 组件 import Popup from &#39;@/components/uni-popup/uni-popup.vue&#39;; 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> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值