willianlu/request-loading

request-loading

基于 TypeScript 开发的 HTTP 请求 Loading 动画插件，主要用于延迟展示 Loading 和防止重复点击。

延迟展示 Loading，短时间内的请求不展示 Loading，当请求时间达到某个阈值（默认 500ms），则展示 Loading，为了防止 Loading 闪烁，做了最少展示时间处理。 防重复点击，当调用 Loading show 时，则先展示透明遮罩，用于阻止用户点击，Loading hide 时，则移除该遮罩。

安装

# 使用npm
npm i -S request-loading
# 使用yarn
yarn add request-loading

运行项目示例

cd ./example
npm install
npm run dev

用法

// 需要引入全局样式
import Loading from 'request-loading'
import 'request-loading/dist/index.css'

Loading.show()

http.get('/user/info').then(() => {
  Loading.hide()
})

方法

• setConfig(options) 你可以设置 Loading 的配置，来达到更理想的效果

参数	类型	必填项	默认	说明
zIndex	number	否	9999	指定 loadin 层级
delay	number	否	500	延迟展示 loading 的时间
icon	string	否	'default'、'dot'、 'bar'	默认提供三种 Loading 动画
iconTemplate	string	否	--	设置自定义 icon 模版

• show Loading 展示调用

• hide 关闭 Loading 调用

License

MIT