Overlay 遮罩层

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

代码演示

基础用法

<hd-button type="primary" @click="onClickShow">显示遮罩层</hd-button>
<hd-overlay :show="show" @click="onClickHide" />

const show = ref<boolean>(false)

function onClickShow() {
  show.value = true
}
function onClickHide() {
  show.value = false
}

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

<hd-button type="primary" @click="onClickShow">嵌入内容</hd-button>
<hd-overlay :show="show" @click="onClickHide">
  <view class="wrapper">
    <div class="block" />
  </view>
</hd-overlay>

const show = ref<boolean>(false)

function onClickShow() {
  show.value = true
}
function onClickHide() {
  show.value = false
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

Props

Name	Description	Type	Required	Default
show	是否显示遮罩	Boolean	false	默认 false
customStyle	自定义样式	String	false	-
duration	动画时长，单位毫秒	Number	false	默认 300
zIndex	自定义层级	Number	false	1
lockScroll	是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动	Boolean	false	默认 false
opacity	不透明度值，当做rgba的第四个参数	String / Number	false	0.5

Events

Event Name	Description	Parameters
click	遮罩被点击时触发	-

Slots

Name	Description	Default Slot Content
default	-	-
default	-	-