Overlay 遮罩层

介绍

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

基础用法

通过 v-model 控制遮罩层的显示与隐藏。

<vd-overlay v-model="show" />

const show = ref(false);

嵌入内容

通过默认插槽可嵌入自定义内容。

<vd-overlay v-model="show" custom-class="overlay-demo">
  <vd-loading type="flower" :size="52" color="#1989fa" />
</vd-overlay>

const show = ref(false);

.overlay-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

API

Props

参数	说明	类型	默认值
show	是否展示	boolean	false
duration	画布高度	TransitionDuration	300
lazy-render	是否懒渲染	boolean	true
lock-scroll	是否锁定背景	boolean	true
z-index	层级	string | number	9

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-

Slots

名称	说明
default	自定义内容