创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
- 通过
show参数配置是否显示遮罩 - 遮罩被点击时，会发送一个
click事件，如不需要此事件，请设置mask-click-able参数为false
<template> <u-overlay :show="show" @click="show = false"></u-overlay> </template> <script> export default { data() { return { show: true } } } </script>
copy
#嵌入内容
通过默认插槽可以在遮罩层上嵌入任意内容
注意：如果不想让slot插槽内容的点击事件冒泡到遮罩，请给指定元素添加上@tap.stop
<template> <u-overlay :show="show" @click="show = false"> <view class="warp"> <view class="rect" @tap.stop></view> </view> </u-overlay> </template> <script> export default { data() { return { show: true } } } </script> <style scoped> .warp { display: flex; align-items: center; justify-content: center; height: 100%; } .rect { width: 120px; height: 120px; background-color: #fff; } </style>
copy
#遮罩样式
- 通过
duration设置遮罩淡入淡出的时长，单位ms
<u-overlay :show="show" :duration="400" :z-index ="999" :opacity="0.3"></u-overlay>
