# layui扩展

**Repository Path**: isvue/layui-extension

## Basic Information

- **Project Name**: layui扩展
- **Description**: layui组件扩展。目前只有bindLoading组件。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2022-01-22
- **Last Updated**: 2022-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui扩展

#### 介绍
layui组件扩展。目前只有bindLoading组件。
做这个加载状态组件的原因是在工作中经常使用echarts做一些比较装杯的页面给投资人看，使用layer原生的加载层是全局的影响使用体验，能展示各个布局模块的加载状态在使用体验上面就比较好一点，并且layer原生的每次使用都要改索性自己就写一个工具模块。由于没有美术细胞所以就乱做了一些上传下载的gif，反正意思大家都理解了，希望有艺术细胞的能做些美观的加载gif更新上来。

#### 软件架构
模仿layer的加载层做了一点改变封装一下就OK了。兼容ie8。

#### 使用说明

![输入图片说明](https://images.gitee.com/uploads/images/2021/0611/171149_aba9cb6f_8858384.png "屏幕截图.png")

```
<script type="text/javascript" src="../bindLoading/bindLoading.js"></script>
	<script>
		layui.config({
		  base: '/BindLoading/'
		}).extend({
		  bindLoading: 'bindLoading/bindLoading'
		});
		layui.use(['bindLoading'],function(){
			var bindLoading = layui.bindLoading;
			//5秒后自动关闭
			bindLoading.loading("#loading1",{type:1,times: 5000,point:{show:true}});//默认为加载中
			//默认加载类型，跟layui一致
			bindLoading.loading("#loading2");
			bindLoading.loading("#loading3",{type:3,point:{show:true,content:'上传中'}});
			bindLoading.loading("#loading4",{type:4,zindex:19891015,point:{show:true,content:'下载中',style:"color: blue"}});
			bindLoading.loading("#loading5",{type:3,point:{show:true,content:'上传中'}});
			setTimeout(function(){
				bindLoading.loading('#loading5',{type:5,point:{show:true,content:'上传完成'}});
			},10000)
			bindLoading.loading("#loading6",{type:4,point:{show:true,content:'下载中'}});
			setTimeout(function(){
				bindLoading.loading('#loading6',{type:6,point:{show:true,content:'下载失败'}});
			},10000)
		})
	</script>
```
### 主要方法loading(elem,options)。
* elem:容器id。
* options对象:
1) type:加载类型。前3个跟官方一致.自己加了上传，下载，成功，失败状态类型(自己做的gif和图片,有点丑,有好的资源可以替换)分别对应数字3、4、5、6。
2) times:加载时间后自动关闭，默认无限循环。
3) zindex:loading层级。
4) point:提示文本对象。
5) point.show:默认false;
6) point.conent:提示文本，默认“加载中”。
7) point.style:string类型，自定义样式。如："color: blue;font-size: smaller"。

### 关闭loading
* 关闭当前close(elem)
* 关闭所有closeAll()

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)