Overlay 遮罩层

向指定元素添加遮罩层, 常用于模态框、抽屉等组件背景。

基础用法

通过 mask 属性控制遮罩层样式上的显示隐藏, 通过 zIndex 属性设置遮罩层层级

设置在 px-overlay 上的 attrs 会被拦截, 自定义类名列表可通过 overlayClass 添加

WARNING

mask 属性仅控制遮罩层显示, 仅属于样式上的区分, 对于插槽内容不做处理

页面滚动的锁定与 px-overlay 卸载挂载关联, 建议使用 v-if 控制实例创建销毁

<template>
  <div class="h-400 f-c bgc-#ebe6e0">
    <div class="f-c">
      <px-button @click="handleOpen">Button</px-button>
      <px-button @click="handleOpen" type="primary">Primary</px-button>
      <px-button @click="handleOpen" type="success">Success</px-button>
      <px-button @click="handleOpen" type="warning">Warning</px-button>
      <px-button @click="handleOpen" type="danger">Danger</px-button>
      <px-button @click="handleOpen" type="sakura">Sakura</px-button>
    </div>
    <px-overlay v-if="visible" :overlayClass="'f-c'">
      <px-button @click="handleClose">Close</px-button>
    </px-overlay>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const handleOpen = () => {
  visible.value = true
}
const handleClose = () => {
  visible.value = false
}
</script>

自定义颜色

通过 color 设置默认遮罩层颜色

TIP

grid, preset 等预设装饰性遮罩层优先级高于 color 自定义颜色

其颜色通过 --px-grid-color-1 等属性修改

<template>
  <div class="h-400 f-c bgc-#ebe6e0">
    <div class="f-c">
      <px-button @click="handleOpen">Button</px-button>
      <px-button @click="handleOpen" type="primary">Primary</px-button>
      <px-button @click="handleOpen" type="success">Success</px-button>
      <px-button @click="handleOpen" type="warning">Warning</px-button>
      <px-button @click="handleOpen" type="danger">Danger</px-button>
      <px-button @click="handleOpen" type="sakura">Sakura</px-button>
    </div>
    <px-overlay
      v-if="visible"
      :overlayClass="'f-c'"
      color="rgba(255, 119, 7, 0.4)"
    >
      <px-button @click="handleClose">Close</px-button>
    </px-overlay>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const handleOpen = () => {
  visible.value = true
}
const handleClose = () => {
  visible.value = false
}
</script>

网格背景-默认

通过 grid 属性设置网格背景

<template>
  <div class="h-400 f-c bgc-#ebe6e0">
    <div class="f-c">
      <px-button @click="handleOpen">Button</px-button>
      <px-button @click="handleOpen" type="primary">Primary</px-button>
      <px-button @click="handleOpen" type="success">Success</px-button>
      <px-button @click="handleOpen" type="warning">Warning</px-button>
      <px-button @click="handleOpen" type="danger">Danger</px-button>
      <px-button @click="handleOpen" type="sakura">Sakura</px-button>
    </div>
    <px-overlay v-if="visible" grid :overlayClass="'f-c'">
      <px-button @click="handleClose">Close</px-button>
    </px-overlay>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const handleOpen = () => {
  visible.value = true
}
const handleClose = () => {
  visible.value = false
}
</script>

网格背景-预设1

通过 preset1 预设网格背景-1, 同时可通过 matte 属性设置遮罩层 哑光 效果

<template>
  <div class="h-400 f-c bgc-#ebe6e0">
    <div class="f-c">
      <px-button @click="handleOpen">Button</px-button>
      <px-button @click="handleOpen" type="primary">Primary</px-button>
      <px-button @click="handleOpen" type="success">Success</px-button>
      <px-button @click="handleOpen" type="warning">Warning</px-button>
      <px-button @click="handleOpen" type="danger">Danger</px-button>
      <px-button @click="handleOpen" type="sakura">Sakura</px-button>
    </div>
    <px-overlay v-if="visible" preset1 matte :overlayClass="'f-c'">
      <px-button @click="handleClose">Close</px-button>
    </px-overlay>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const handleOpen = () => {
  visible.value = true
}
const handleClose = () => {
  visible.value = false
}
</script>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Overlay API

Props

Name	Description	Type	Default
mask	是否显示遮罩层(仅为样式上的区分, 控制使用 v-if)	boolean	true
zIndex	层级	number	2000
overlayClass	遮罩层类	string | string[] | Record<string, boolean>	-
lockScroll	是否锁定滚动	boolean	true
color	默认遮罩层自定义颜色	string	-
grid	网格背景默认	boolean	false
matte	是否开启哑光	boolean	false
preset1	网格背景预设-1	boolean	-

Events

Name	Description	Type
click	点击事件	function

Slots

Name	Description
default	默认插槽