更新记录

1.0.2（2024-06-20）

修复Icon组件的错误引用

1.0.1（2024-06-17）

使用r-theme的css变量

1.0.0（2024-06-13）

first

查看更多

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

r-popup

r-popup 是一个基于 animate.css 的一个uniapp vue3 的弹出层容器，用于展示弹窗、信息提示等内容。

示例

<r-popup v-model:show="show" round position="bottom">
  <view style="height: 100px; background-color: #fff">11111</view>
</r-popup>

API

Props

参数 说明 类型 默认值 可选值
show 是否显示弹出层 Boolean false true
overlay 是否显示遮罩层 Boolean true false
position 弹出位置 String center top | bottom | right | left | center
overlayClass 自定义遮罩层类名 String "" -
overlayStyle 自定义遮罩层样式 Object {} -
duration 动画时长，单位毫秒，设置为 0 可以禁用动画 Number 300 -
zIndex 将弹窗的 z-index 层级设置为一个固定值 Number 2000 -
round 是否显示圆角 Boolean false true
lockScroll 是否锁定背景滚动 Boolean true false
closeOnClickOverlay 是否在点击遮罩层后关闭 Boolean true false
themeName 主题名称 String default 可自定义 r-theme 设置
closeable 是否显示关闭图标 Boolean false true
closeIcon 闭图标名称或图片链接，等同于 r-icon 组件的 name 属性 String cross -
closeIconPosition 关闭图标位置 String top-right top-left | bottom-left | bottom-right | top-right
iconPrefix 图标类名前缀，等同于 r-icon 组件的 prefix 属性 String van-icon iconfont
safeAreaInsetTop 是否开启顶部安全区适配 Boolean false true
safeAreaInsetBottom 是否开启底部安全区适配 Boolean false true
customStyle 自定义样式 Object {} -
customClass 自定义类 String

Slots

名称 说明
default 组件内部，将需要添加内容放置于此

Events

事件名 说明 回调参数
click 点击弹出层时触发 e
click-overlay 点击遮罩层时触发 e
click-close-icon 点击关闭图标时触发 e
open 打开弹出层时立即触发 -
close 关闭弹出层时立即触发 -
opened 打开弹出层且动画结束后触发 -
closed 关闭弹出层且动画结束后触发 -
update:show value值改变时触发 value

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...