更新记录

1.0.8（2024-08-01） 下载此版本

增加示例

1.0.7（2024-07-30） 下载此版本

适配r-theme

1.0.6（2024-07-23） 下载此版本

修复控制台警告

平台兼容性

r-overlay

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

示例

<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

Slots

Events