Overlay 遮罩层

Transition 动画

template

<vz-button block @click="handleShowTransition">Transition 动画</vz-button>

<vz-overlay v-model:show="isShowTransition" closeable></vz-overlay>

script

import { ref } from "vue";

const isShowTransition = ref(false);
function handleShowTransition() {
  isShowTransition.value = true;
}

Animation 动画

template

<vz-button block @click="handleShowAnimation">Animation 动画</vz-button>

<vz-overlay v-model:show="isShowAnimation" animation closeable></vz-overlay>

script

import { ref } from "vue";

const isShowAnimation = ref(false);
function handleShowAnimation() {
  isShowAnimation.value = true;
}

Props

属性名	说明	类型	默认值	样式变量
v-model:show	是否显示遮罩层	boolean	false	-
z-index	z-index	number / string	calc(var(--vz-z-index) + 100)	--vz-overlay-z-index
top	top	string / number	0	--vz-overlay-top
bottom	bottom	string / number	0	--vz-overlay-bottom
left	left	string / number	0	--vz-overlay-left
right	right	string / number	0	--vz-overlay-right
closeable	点击是否可关闭	boolean	false	-
background	背景	string	rgba(0, 0, 0, 0.6)	--vz-overlay-background
animation	是否使用 animation 动画	boolean	false	-
duration	动画时长（设置为 0 可关闭动画）。单位 ms	number	250	-
i-class	根节点样式类	string	-	-
i-style	根节点样式	Vue.CSSProperties	-	-

Events

事件名	说明	参数
click	点击事件	-

Slots

插槽名	说明
default	默认插槽

SCSS

$overlay: (
  "z-index": calc(var(--vz-z-index) + 100)),
  "background": rgba(0, 0, 0, 0.6),
);