Overlay 遮罩层

介绍

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

引入

import Vue from 'vue';
import Overlay from '@ophiuchus/overlay';

Vue.use(Overlay);

代码演示

基础用法

<sf-button type="primary" text="显示遮罩层" @click="show = true" />
<sf-overlay :show="show" @click="show = false" />

export default {
  data() {
    return {
      show: false
    }
  }
},

嵌入内容

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

<sf-overlay :show="show" @click="show = false">
  <div class="wrapper" @click.stop>
    <div class="block" />
  </div>
</sf-overlay>

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

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>

API

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | show | 是否展示遮罩层 | boolean | false | | z-index | z-index 层级 | number | string | 1 | | duration | 动画时长，单位秒 | number | string | 0.3 | | class-name | 自定义类名 | string | - | | custom-style | 自定义样式 | object | - | | lock-scroll | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | boolean | true |

Events

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

Slots

| 名称 | 说明 | | ------- | ---------------------------------- | | default | 默认插槽，用于在遮罩层上方嵌入内容 |

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。

| 名称 | 默认值 | 描述 | | ------------------------- | -------------------- | ---- | | @overlay-z-index | 1 | - | | @overlay-background-color | rgba(0, 0, 0, 0.7) | - |