更新记录

2.1.3（2021-10-13）

• 修改微信小程序环境下关闭按钮显示样式问题。

2.1.2（2021-10-13）

• 修复小程序开发工具不能正常使用问题。

2.1.1.1（2021-10-13）

• 修改文档说明

平台兼容性

Mask 蒙版

组件名：dm-mask 代码块： dmMask

视图蒙版组件。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<dm-mask :show="true"></dm-mask>
<dm-mask :show.sync="show"></dm-mask>
<dm-mask :show.sync="show" width="50%" height="50%"  background-color="red" :z-index="99" closable></dm-mask>
<dm-mask :show.sync="show" :custom-style="{fontSize: '50px', color: 'red', padding: '15px 15px'}"></dm-mask>
<dm-mask :show.sync="show" @on-click="clickMask"></dm-mask>
<dm-mask :show.sync="show" @on-click="clickMask">
    <button type="default" @click.stop="clickButton()">点击</button>
</dm-mask>

注意：

• 如果给mask添加了点击事件，则在它内部的元素如果也存在点击事件，为了防止事件冒泡触发，需要使用.stop事件修饰符来解决事件冒泡可能触发的多重点击问题。

API

Mask Props

说明：

• 这里z-index属性设置值超过997后为全屏蒙版（将会遮盖状态栏），将会覆盖状态栏。当值小于等于997，将不遮盖状态栏，在状态栏下形成蒙版。所以在开发中请合理设置z-index值大小，这里默认值为99，不会覆盖状态栏。如不需要全屏蒙版，则不需要重新设置z-index值大小。

Mask Events

Mask Slots

Mask 支持插槽，直接在mask组件内部进行视图编辑