简介
@beisen-cmps/loading
是一款用于前端展示加载状态的 npm 包。
该包支持多种样式和配置,可以轻松地定制出适合自己项目的加载状态展示效果。
安装
通过 npm 安装 @beisen-cmps/loading
:
--- ------- --------------------
使用
1. 初始化
在项目的 JavaScript 文件中引入 @beisen-cmps/loading
并初始化:
------ ------- ---- ----------------------- ----- ------- - --- --------- ------- --------------------------------------------- ----- ------------- -------- ----------- ---
其中,参数说明如下:
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
target | Element | 是 | 无 | 要展示加载状态的 DOM 元素 |
text | String | 否 | '' | 加载状态提示文字 |
spinner | String | 否 | 'spinner1' | 加载状态图标样式,可选值见下文 |
duration | Number | 否 | 1500 | 加载状态显示时间 |
delay | Number | 否 | 0 | 加载状态显示延迟时间 |
zIndex | Number | 否 | 9999 | 加载状态在 z 轴方向上的层级 |
className | String | 否 | 'beisen-cmps-loading-mask' | 加载状态的 className,用于自定义样式 |
2. 显示
通过调用 loading.show()
显示加载状态。
---------------
3. 隐藏
通过调用 loading.hide()
隐藏加载状态。
---------------
示例
下面是一个简单的示例代码,用于展示如何在页面中使用 @beisen-cmps/loading
。
--------- ----- ------ ------ ----- ---------------- --------------------------- ------------ ------- ---------------------------------------------------------------------------- ------- -------------- ------ ------- ---- ----------------------- ----- ------- - --- --------- ------- --------------------------------------------- ----- ------------- -------- ----------- --- ------------------------------- -- - --------------- ------------- -- - --------------- -- ------ --- --------- ------- ------------------ - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ - -------- ------- ------ ------- ------------------------------------- ---- ----------------------------- ------- -------
样式
@beisen-cmps/loading
支持以下几种加载状态图标样式:
spinner1
spinner2
spinner3
spinner4
spinner5
spinner6
spinner7
spinner8
总结
@beisen-cmps/loading
是一款功能强大且方便使用的前端加载状态展示 npm 包,通过本文的介绍和示例,相信读者已经掌握了如何在自己的项目中使用 @beisen-cmps/loading
实现自定义的加载状态展示效果。同时,读者也可以根据自己的实际需求进行样式和配置的定制,以获得更好的使用体验。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/137886