修改 uni-popup 弹出层的圆角

重要:修改圆角其实不是修改 uni-popup 的圆角 ,修改的是 uni-popup 上view 标签的圆角 只是把 uni-popup组件的背景设置成透明 将 uni-popup上面的view设置成白色背景在设置圆角

// background-color="rgba(0,0,0,0)" //将uni-popup设置成透明 
// :safeArea='false' 关闭底部留底
<uni-popup ref="popup" background-color="rgba(0,0,0,0)" :safeArea='false' >
    <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
						class="text">popup 内容</text></view>
</uni-popup>

将 uni-popup 里面的 view 标签设置白色背景 圆角

.popup-content{
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    background: #fff;    
}

### uv-popup 的使用方法 `uv-popup` 是 `uv-ui` 组件库中的一个组件,用于实现弹出功能。它可以在多种场景下使用,比如提示用户信息、展示额外选项或者作为表单容器等[^2]。 以下是关于如何在项目中引入并使用 `uv-popup` 的具体说明: #### 1. 安装与引入 如果尚未安装 `uv-ui` 组件库,则需要先通过 npm 进行安装: ```bash npm install @dcloudio/uni-ui --save ``` 接着,在项目的入口文件(如 main.js 或 app.vue)中全局注册该组件: ```javascript import uView from '@dcloudio/uni-ui'; Vue.use(uView); ``` 对于按需加载的情况,可以直接单独引入 `uv-popup` 并注册到页面中: ```javascript import uvPopup from '@/components/uv-popup/uv-popup.vue'; export default { components: { uvPopup } }; ``` --- #### 2. 基础属性配置 `uv-popup` 提供了一些常用的属性来控制其行为和样式。以下是一些核心参数及其作用: | 属性名 | 类型 | 默认值 | 描述 | |--------------|----------|-------------|----------------------------------------------------------------------| | mode | String | center | 弹窗显示模式,可选值有 `center`, `top`, `bottom`, `left`, `right` | | show | Boolean | false | 是否显示弹窗 | | closeOnClickOverlay | Boolean | true | 点击遮罩是否关闭弹窗 | | round | Number | 0 | 设置圆角大小 (单位 rpx),仅当 mode 为 top/bottom/left/right 生效 | 更多高级属性可以参考官方文档[^3]。 --- #### 3. 示例代码 下面是一个简单的例子,展示了如何动态控制 `uv-popup` 的显示状态以及响应用户的交互事件。 ##### 页面结构 (`template`) ```html <view> <!-- 打开按钮 --> <button type="primary" @click="togglePopup">打开弹窗</button> <!-- 弹窗组件 --> <uv-popup :show="isShow" mode="center" @close="onClose"> <view class="popup-content"> <text>这是一个居中显示的弹窗。</text> <button size="mini" @click="hidePopup">关闭</button> </view> </uv-popup> </view> ``` ##### 脚本逻辑 (`script`) ```javascript export default { data() { return { isShow: false, // 控制弹窗显隐的状态变量 }; }, methods: { togglePopup() { this.isShow = true; // 显示弹窗 }, onClose() { console.log('点击了遮罩'); this.hidePopup(); // 遮罩触发隐藏 }, hidePopup() { this.isShow = false; // 关闭弹窗 } } }; ``` ##### 样式定义 (`style`) 为了优化用户体验,可以通过自定义 CSS 来调整弹窗的内容区域布局: ```css .popup-content { padding: 20rpx; background-color: #fff; border-radius: 10rpx; } ``` --- ### 注意事项 - 如果目标平台不支持某些特性(例如 H5 和小程序),则需要注意避免调用 App 端特有 API[^1]。 - 对于复杂业务需求,建议结合其他组件一起使用,例如搭配 `uv-button` 实现更丰富的交互效果。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值