Overlay 遮罩层

开启一个全屏遮罩层，用于显示弹窗、加载中、锁屏等场景。

基础用法

通过mask属性来控制遮罩层的显示与隐藏。

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

const showOverlay = ref(false)


const toggleOverlay = () => {
    showOverlay.value = !showOverlay.value
}

</script>


<template>
    <div>
        <ym-button @click="toggleOverlay">开启遮罩层</ym-button>
        <ym-overlay @click="toggleOverlay" v-if="showOverlay" overlayClass="overlay">
            <div>
                <ym-card style="width: 200px; background-color: #fff;" header="这是遮罩层">
                    <ym-button @click="toggleOverlay">关闭</ym-button>
                </ym-card>
            
            </div>
        </ym-overlay>
    </div>
</template>

<style scoped>
.overlay {
    display: flex;
    justify-content: center;
    align-items: center
}
</style>

Overlay API

Props

Name	Description	Type	Default
mask	遮罩层的显示隐藏	boolean	true
zIndex	遮罩层的层级	number	-
overlayClass	遮罩层的类名	string	-

Slots

Name	Description
default	默认插槽