1.0.0 • Published 8 months ago

wil-loading v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

wil-loading

通用loading组件。默认提供两种loading方式。

Demo示例
前往Gitee

注意
1. 由于此组件使用了document.body方法，所以必须在\<body>标签内引用此组件，否则会出现报错; 2. 本组件不支持 import 的方式引入。

安装

npm install wil-loading
# 安装 raw-loader，要求版本号为 0.5.1 版本
npm install raw-loader@0.5.1

在 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 样式的需求，不需要调用此方法。
调用此方法参数不能为空

属性类型默认值是否必填说明
contentString'加载中...'否loading 文本提示
bgString无否背景样式，cssText写法，传参后，会有一个遮罩层，隔离底部的dom事件
txtString无否文本样式，cssText写法
iconString无否icon图标
posString无否icon和文本的容器dom样式，cssText写法
imgString无否icon样式，cssText写法

loading.show();

显示 Loading

loading.hide();

隐藏 Loading

@everything-registry/sub-chunk-3147
1.0.0

8 months ago