Overlay 组件

介绍

创建一个遮罩层，通常用于阻止用户进行其他操作

安装

  1. import { createApp } from 'vue';
  2. import { OverLay } from '@nutui/nutui';
  4. const app = createApp();
  5. app.use(OverLay);

代码演示

基础用法

  1. <nut-overlay v-model:visible="state.show" :z-index="2000"></nut-overlay>

嵌套内容

  1. <nut-overlay v-model:visible="state.show2" :z-index="2000">
  2.   <div class="wrapper">
  3.     <div class="content">这里是正文</div>
  4.   </div>
  5. </nut-overlay>

API

Props

参数说明类型默认值
v-model:visible当前组件是否显示Booleanfalse
z-index遮罩层级String, Number2000
duration动画时长，单位秒String, Number0.3
overlay-class自定义遮罩类名String-
overlay-style自定义遮罩样式CSSProperties-
lock-scroll背景是否锁定Booleanfalse
close-on-click-overlay是否点击遮罩关闭Booleantrue

Events

事件名说明回调参数
click点击时触发event: Event

OverLay 遮罩层 - 图1