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