Popup 弹出层

手机扫码预览

01:50



---

组件名：rice-popup

弹出层容器，用于展示弹窗、信息提示等内容

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础使用

通过 v-model 可以控制 Popup 的显示,position 可以设置弹出的位置，默认为 center， 可选 top right bottom left

<rice-popup v-model:show="show" position="center" :closeable="false">
  <view class="popup-center">
    <rice-button type="primary" text="点我关闭" @click="show=false"></rice-button>
  </view>
</rice-popup>

<style>
.popup-center {
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  width: 150px;
  height: 150px;
}
</style>

样式

• 通过设置 radius 可以得到一个圆角的弹窗
• 通过 close-icon 可以设置关闭图标Icon值
• 通过 duration 可以设置过渡时间

<rice-popup v-model:show="show4" position="bottom" radius="8px" close-icon="clear" :duration="600">
  <view class="popup-box">
    <rice-button type="primary" text="点我关闭" @click="show4=false"></rice-button>
  </view>
</rice-popup>

API

Props

属性名	类型	说明	默认值
v-model:show/show	Boolean	是否显示	false
duration	Number	动画时长，单位ms	300
position	String	位置，可选值：top、bottom、left、right、center	center
z-index	Number	z-index值	999
opacity	Boolean	是否使用透明度的渐变效果	true
zoom	Boolean	是否使用缩放，对center 有效	true
overlay	Boolean	是否显示遮罩层	true
overlay-bg-color	String	遮罩层的背景色	-
closeable	Boolean	是否显示关闭图标	true
close-icon	String	关闭图标的icon 名称	-
close-icon-position	String	关闭图标的位置，可选值：top-left、top-right、bottom-left、bottom-right	-
close-on-click-overlay	Boolean	是否在点击遮罩层后关闭，默认true	-
radius	String|Number	圆角值，默认0px	-
bg-color	String	自定义背景色	-
safe-area-inset-top	Boolean	是否开启顶部安全区适配，默认false	-
safe-area-inset-bottom	Boolean	是否开启底部安全区适配，默认true	-
before-close	Function	状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止关闭,before-close 只会在用户点击关闭按钮或遮罩区域时被调用	-
margin-top	String|Number	主要针对center	-
custom-style	Object	自定义style	-

Events

事件名	说明	回调参数
open	打开时触发	-
close	关闭时触发	-
opened	打开动画结束时触发	-
closed	关闭动画结束时触发	-
clickOverlay	点击遮罩层时触发	-

Slot

名称	说明
default	自定义内容

类型定义

组件导出如下类型

const popupRef=ref<RicePopupComponentPublicInstance|null>(null)