更新记录

0.0.4（2023-06-07）

优化演示代码

0.0.3（2023-06-06）

优化文档

0.0.2（2023-06-04）

将公共依赖提取至hd-utils

平台兼容性

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

Overlay 遮罩层

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

代码演示

基础用法

<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;
}

Props

Events

Slots

联系方式

有不明白或者建议可以扫码交流

联系我们