介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

import Overlay from 'sard-uniapp/components/overlay/overlay.vue'

代码演示

基础使用

使用visible属性控制其显隐。

vue lang="ts"

<template>
  <sar-overlay :visible="visible" @click="visible = false"></sar-overlay>

  <sar-button @click="visible = true">显示遮罩</sar-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

vue lang="js"

<template>
  <sar-overlay :visible="visible" @click="visible = false"></sar-overlay>

  <sar-button @click="visible = true">显示遮罩</sar-button>
</template>

<script setup lang="js">
import { ref } from "vue";
const visible = ref(false);
</script>

API

OverlayProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
visible	控制显隐	boolean	-
z-index	设置层级	number | string	-
duration	透明度过渡持续时间	number	300
background	自定义遮罩层的背景色	string	-
transparent	透明遮罩	boolean	false

OverlaySlots

插槽	描述	属性
default	自定义默认内容	-

OverlayEmits

事件	描述	类型
click	点击遮罩时触发	(event: any) => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-overlay-bg: var(--sar-mask);
  --sar-overlay-z-index: 1000;
  --sar-overlay-duration: var(--sar-duration);
}