Overlay 遮罩层

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

导入

import Overlay from '@/components/dialog/Overlay.vue';

使用方法

基础用法

基础遮罩层可以用于阻止用户操作，通常与其他组件结合使用。

<template>
  <Overlay
    :show="showProp1"
    @close="() => showProp1 = false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Overlay from '@/components/dialog/Overlay.vue';

const showProp1 = ref(false);
</script>

嵌入内容

遮罩层中可以嵌入自定义内容，如图片、表单等。

<template>
  <Overlay
    :show="showProp2"
    @close="() => showProp2 = false"
  >
    <FlexCol center>
      <Image
        :src="TestImage"
        :width="700"
        :height="800"
      />
    </FlexCol>
  </Overlay>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Overlay from '@/components/dialog/Overlay.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Image from '@/components/basic/Image.vue';
import TestImage from '/static/images/test/testDialog.png';

const showProp2 = ref(false);
</script>

自定义背景颜色

可以通过 maskColor 属性自定义遮罩层的背景颜色。

<template>
  <Overlay
    :show="showProp3"
    maskColor="rgba(2, 14, 244, 0.3)"
    @close="() => showProp3 = false"
  >
    <FlexCol backgroundColor="white" :width="200" :height="200" />
  </Overlay>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Overlay from '@/components/dialog/Overlay.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

const showProp3 = ref(false);
</script>

API 参考

Overlay

遮罩层组件，基于 Popup 组件封装。

Props

名称	说明	类型	必填	默认值
show	是否显示当前遮罩层	boolean	是	-
maskColor	遮罩的颜色	string	-	'background.mask'
mask	是否显示遮罩，默认是	boolean	-	true
backgroundColor	弹出层背景颜色，默认是透明	string	-	'transparent'
duration	指定弹出层动画时长，毫秒	number	-	230
closeable	是否可以点击遮罩关闭当前遮罩层	boolean	-	true
margin	对话框偏移边距，默认为0，0，0，0	number[]	-	[0,0,0,0]
inset	强制设置整体边距（包括遮罩层）	(number|string|undefined)[]	-	[undefined,undefined,undefined,undefined]
safeArea	从侧边弹出时，是否自动设置安全区	boolean	-	true
innerStyle	指定当前弹出层的特殊样式	ViewStyle	-	-
size	指定弹出层从侧边弹出的高度或宽度	string|number	-	'30%'

Slots

名称	说明
default	默认插槽，用于插入遮罩层中的内容

Events

名称	说明	参数
close	点击遮罩层时触发的事件	无

主题变量

名称	类型	默认值	说明
PopupMaskBackgroundColor	string	rgba(0, 0, 0, 0.5)	遮罩层背景颜色