wil-loading
v1.0.0
Published
通用loading组件
Downloads
5
Readme
wil-loading
通用loading组件。默认提供两种loading方式。
注意
- 由于此组件使用了
document.body方法，所以必须在<body>标签内引用此组件，否则会出现报错; - 本组件不支持 import 的方式引入。
安装
npm install wil-loading
# 安装 raw-loader，要求版本号为 0.5.1 版本
npm install [email protected]在 html 文件内使用 <script> 标签内联引入
<script><%=require('raw-loader!wil-loading')%></script>使用此方式引入组件。必须在最靠近 <body> 标签的位置使用 <script> 标签引入。
使用方式
/** 自定义 Loading 样式 */
loading.custom({
content: 'loading...',
bg: 'background-color: black',
txt: 'color: white'
});
/** 显示 Loading */
loading.show();
/** 隐藏 Loading */
loading.hide();
/** 自定义 icon */
loading.custom({
pos: 'padding: 39px; background: rgba(0,0,0,0.7); border-radius: 12px; border: 1px solid rgba(255,255,255,1);',
// 此icon链接只能公司内网访问，生产环境不可使用此icon链接！！
icon: 'http://xxx.xx/static/loading_icon.png',
img: 'width: 30px; height: 30px; margin:0;',
content: ''
});API
loading.custom(Object object);
自定义 Loading 样式，若没有自定义 Loading 样式的需求，不需要调用此方法。
调用此方法参数不能为空
| 属性 | 类型 | 默认值 | 是否必填 | 说明 | | ------- | ------ | ---------------| -------- | ----------------------------------------------------------- | | content | String | '加载中...' | 否 | loading 文本提示 | | bg | String | 无 | 否 | 背景样式，cssText写法，传参后，会有一个遮罩层，隔离底部的dom事件 | | txt | String | 无 | 否 | 文本样式，cssText写法 | | icon | String | 无 | 否 | icon图标 | | pos | String | 无 | 否 | icon和文本的容器dom样式，cssText写法 | | img | String | 无 | 否 | icon样式，cssText写法 |
loading.show();
显示 Loading
loading.hide();
隐藏 Loading