Rainui

Appearance

r-overlay ​

r-overlay 是一个基于 r-animation 的一个 vue3 的遮罩层组件，一般用于弹窗场景。

示例 ​

vue
<template>
  <r-config-provider :themeName="themeName">
    <page-header title="遮罩层"></page-header>
    <view style="padding: 20rpx">
      <r-divider content-position="left">基本使用</r-divider>
      <r-button
        type="primary"
        @click="
          () => {
            show = true;
            zIndex = 1;
            hasContent = false;
          }
        "
        >显示遮罩层</r-button
      >
      <r-divider content-position="left">嵌入内容</r-divider>
      <r-button
        type="primary"
        @click="
          () => {
            show = true;
            zIndex = 1;
            hasContent = true;
          }
        "
        >嵌入内容</r-button
      >
      <r-divider content-position="left">设置 z-index </r-divider>
      <r-button
        type="primary"
        @click="
          () => {
            show = true;
            zIndex = 1000;
            hasContent = false;
          }
        "
        >设置 z-index
      </r-button>
    </view>

    <r-overlay :show="show" :zIndex="zIndex" @click="show = false">
      <view class="wrapper" @click.stop="show = false" v-if="hasContent">
        <view class="block" />
      </view>
    </r-overlay>
  </r-config-provider>
</template>

<script setup>
import { ref } from "vue";
import useTheme from "@/hooks/useTheme";
const { themeName } = useTheme();
const zIndex = ref(1);
const show = ref(false);
const hasContent = ref(false);
</script>
<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>

API ​

Props ​

参数说明类型默认值可选值
show加载动画的显隐Booleanfalsetrue
entryClass入场动画Stringanimate__fadeInanimate__bounceIn ...更多可移步到官网查看 https://animate.style/
exitClass退场动画Stringanimate__fadeOutanimate__bounceOut ...更多可移步到官网查看 https://animate.style/
duration持续时间(ms)Number1000-
delay延迟时间(ms)Number0-
customStyle自定义样式Object{}-
customTransitionStyle自定义动画组件样式 （r-animation 的 customStyle 属性）Object{}-
customClass自定义类名String, | Array |Object''-
color背景颜色Stringrgba(0,0,0,0.7)-
zIndex层级Number2000-
themeName主题名称Stringdefault可自定义 r-theme 设置

Slots ​

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

Events ​

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

更多组件，请前往rainui