在前端开发中,常常需要使用到遮罩层,用于提示用户当前操作正在进行中。而 milkui-mask 就是一个方便易用的 npm 包,可以快速实现遮罩层的功能。
安装
在使用 milkui-mask 之前,需要先安装它。在命令行中输入以下指令即可:
npm install milkui-mask --save
使用
安装完成后,我们就可以在项目中使用 milkui-mask。在 HTML 文件中添加一个 div,用于显示遮罩层:
<div id="mask"></div>
接着,在 Javascript 文件中导入 milkui-mask 并创建实例:
import Mask from 'milkui-mask'; const mask = new Mask('#mask');
这里的第一个参数是 CSS 选择器,用于指定要显示遮罩层的 div。
我们可以在需要显示遮罩层的时候,调用 mask.show() 方法展示遮罩层,再调用 mask.hide() 方法隐藏遮罩层。例如:
mask.show(); // do something mask.hide();
如果需要在展示遮罩层的时候添加文字提示,可以传入一个字符串作为参数:
mask.show('正在加载中...'); // do something mask.hide();
默认情况下,遮罩层会使用半透明黑色作为背景色。如果需要更改背景色,可以传入一个 CSS 颜色值作为参数:
mask.setColor('#ffffff');
示例代码
<!-- HTML 文件 --> <div id="mask"></div> <button id="show-mask">展示遮罩层</button> <script src="path/to/your/javascript/file"></script>
-- -------------------- ---- ------- -- ---------- -- ------ ---- ---- -------------- ----- ---- - --- -------------- ----- ------- - ------------------------------------- --------------- - ---------- - ---------------------- ------------- -- - ------------ -- ------ -
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055a2181e8991b448d7c39