介绍

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

代码演示

基础使用

使用visible属性控制其显隐。

vue ts

<template>
  <s-overlay :visible="visible" :z-index="zIndex" @click="visible = false"></s-overlay>

  <s-button @click="onClick">显示遮罩</s-button>
</template>

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

const visible = ref(false)

const [zIndex, increaseZIndex] = useZIndex()

const onClick = () => {
  increaseZIndex()
  visible.value = true
}
</script>

vue js

<template>
  <s-overlay :visible="visible" :z-index="zIndex" @click="visible = false"></s-overlay>

  <s-button @click="onClick">显示遮罩</s-button>
</template>

<script setup lang="js">
import { useZIndex } from 'sard'
import { ref } from 'vue'
const visible = ref(false)
const [zIndex, increaseZIndex] = useZIndex()
const onClick = () => {
  increaseZIndex()
  visible.value = true
}
</script>

API

OverlayProps

属性	描述	类型	默认值
visible	控制显隐	boolean	-
z-index	设置层级	number	-
background	自定义遮罩层的背景色	string	-
transparent	透明遮罩	boolean	false

OverlaySlots

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

OverlayEmits

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