Overlay 遮罩层

预览

01:38



---

组件名：rice-overlay

创建一个遮罩层，用于显示特定的内容

基础使用

通过 v-model 可以控制遮罩层的显示与否

<rice-overlay v-model:show="show" />

嵌入内容

需要注意的是，如果slot里面的元素有点击事件，该事件需要阻止冒泡

<rice-overlay v-model:show="show1">
  <view class="slot-box">
    <view class="slot-box_son" @click.stop="boxClick"></view>
  </view>
</rice-overlay>

<script setup>
  const boxClick=()=>{}
</script>
<style lang="scss">
.slot-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  &_son {
    background-color: #fff;
    border-radius: 4px;
    width: 120px;
    height: 120px;
  }
}

</style>

过渡时间

通过 duration 可以设置过渡时间，单位ms

<rice-overlay v-model:show="show2" :duration="600"></rice-overlay>

背景颜色

通过 bg-color 可以设置遮罩层的背景色

<rice-overlay v-model:show="show3" bg-color="rgba(0,0,0,.3)"></rice-overlay>

API

Props

属性名	类型	说明	默认值
v-model:show/show	Boolean	是否显示	-
z-index	Number	层级	999
close-on-click-overlay	Boolean	是否在点击遮罩层后关闭	true
duration	Number	动画时长，单位ms	300ms
bg-color	String	自定义背景颜色	-
custom-style	Object	自定义样式	-

Events

事件名	说明	回调参数
click	点击遮罩层时触发	(event:UniPointerEvent)
opened	打开遮罩层动画结束时触发	-
closed	关闭遮罩层动画结束时触发	-

Slot

名称	说明
default	自定义内容

类型定义

组件导出如下类型

const overlayRef=ref<RiceOverlayComponentPublicInstance|null>(null)