vue2-loading-bar | 仿Youtube Loading进度条效果的vue插件


源码介绍

简要教程

vue2-loading-bar是一个基于Vue.js 2.x的加载进度条组件。它模仿了Youtube Loading进度条效果。

使用方法

安装

如果您想使用vue2-loading-bar进度条插件,首先您需要安装它,命令如下:

npm install vue2-loading-bar --save
		
使用

在vue模块中导入插件:

import LoadingBar from 'vue2-loading-bar'

export default {
	components: {
    	LoadingBar
  	},
  	...
}			
		

然后可以在模板中使用组件:

<loading-bar
:on-error-done="errorDone"
:on-progress-done="progressDone"
:progress="progress"
:direction="direction"
:error="error"
>
</loading-bar>		
		

其中的配置项参考下面的配置参数。

配置参数

vue-circle-slider滑块插件的配置参数如下:

  • id:vue2-loading-bar进度条组件的id。
  • customClass:vue2-loading-bar进度条组件的class名称。
  • progress:vue2-loading-bar进度条组件的进度值。
  • direction:vue2-loading-bar进度条组件的动画方向。可选值:rightleft,默认值为right
  • error:标识进度条为error状态。布尔值。
  • onErrorDone:当加载条完成其错误状态时,应更改其parent状态。
  • onProgressDone:应将父级的进度状态设置为0。

github网址:https://github.com/BosNaufal/vue2-loading-bar



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部