MUI 框架之遮罩蒙版（mask）

最新推荐文章于 2023-02-08 16:40:28 发布

呆萌滴加菲猫

最新推荐文章于 2023-02-08 16:40:28 发布

阅读量5.4k

点赞数

分类专栏： MUI 文章标签： mui 遮罩蒙版mask

本文链接：https://blog.csdn.net/weixin_44310502/article/details/87938027

版权

本文介绍了MUI框架中的遮罩蒙版（mask）功能，阐述了其在popover、侧滑菜单等场景下的作用，即提供一个半透明的覆盖层，阻止用户与底层元素交互。通过.mui-backdrop类实现，具有固定的布局和一定的透明度。

摘要由CSDN通过智能技术生成

mask（遮罩蒙版）

用处

在popover、侧滑菜单等界面，经常会用到蒙版遮罩；
比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户>点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；
再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

官方示例

mui默认的蒙版遮罩使用.mui-backdrop类

.mui-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
background-color: rgba(0,0,0,.3);
}

		<!-- 主界面不动、菜单移动 -->
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
		  <!-- 菜单容器 -->
		  <aside class="mui-off-canvas-left" id="offCanvasSide">
		    <div class="mui-scroll-wrapper">
		      <div class="mui-scroll">