# Overlay 遮罩层

请扫码查看示例

# 介绍

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

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

通过设置 active 属性，可以控制遮罩层是否显示。

<element name="m-overlay" src="@/node_modules/mui-minix/src/overlay/index"></element>
<m-overlay active="{{active}}" @m-close="onClose">
    <div class="win">
        <text class="text white">hello from overlay at default slot</text>
    </div>
</m-overlay>

1
2
3
4
5
6

export default {
  data() {
    return {
      active: true
    };
  },
  onClose(){
      this.active = false
  }
};

1
2
3
4
5
6
7
8
9
10

.win {
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.text {
    font-size: 14px;
}

.white {
    color: #ffffff;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Api

# Prop

字段	说明	类型	默认值	是否必须
`active`	是否显示遮罩层	`boolean`	`false`	`是`
`z-index`	z 轴排序	`number`	`1030`	`否`

# Events

名称	说明	回调参数
`m-close`	点击时触发	`-`

# Slots

名称	说明
`default`	自定义遮罩层内容