# Mask 遮罩层

用于整个场景或一个特定区域,使场景外的对象或特定区域外的对象不可见,并阻止用户对遮罩下层的内容进行操作,从而实现一些特殊的效果,一般用于弹窗场景。

# 基本使用

通过 <n-mask> 形式调用,设置 show 参数控制是否显示

<template>
	<view>
		<n-mask :show="show"></n-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true
			}
		},
		methods: {

		}
	}
</script>

# 点击遮罩层关闭

通过 mask-close 参数控制击遮罩层是否可关闭
遮罩层开启或关闭将触发 @change 事件,返回当前 show 的状态

<template>
	<view>
		<n-mask :show="show" mask-close @change="onChange"></n-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true
			}
		},
		methods: {
			onChange(e){
				this.show = e.detail
			}
		}
	}

# 嵌入内容

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

<template>
	<view>
		<n-mask :show="show" @change="onChange">
			<view class="warp">
				<view class="mask">
					
				</view>
			</view>
		</n-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			onChange(e) {
				this.show = e.detail
			}
		}
	}
</script>

<style scoped>
	.warp {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		justify-content: center;
		align-items: center;
	}
	.mask {
		width: 300rpx;
		height: 300rpx;
		background-color: #FFFFFF;
	}
</style>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值
show 控制显示或者隐藏 Boolean true false
mask-close 点击遮罩层是否可关闭 Boolean true false

# Event 事件

事件名 说明 返回值
@change 当打开或者关闭时返回遮罩层状态 {detail: 遮罩层状态}

# Slot 插槽

事件名 说明
default 默认插槽,用于在遮罩层上方嵌入内容