logpm/uni_modules/fant-mini-plus/components/hd-overlay/INDEX.md

代码演示

基础用法

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

const show = ref<boolean>(false)

function Show() {
  show.value = true
}
function Hide() {
  show.value = false
}

嵌入内容

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

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

const show = ref<boolean>(false)

function Show() {
  show.value = true
}
function Hide() {
  show.value = false
}

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

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