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进度条组件的动画方向。可选值：right或left，默认值为right。
• error：标识进度条为error状态。布尔值。
• onErrorDone：当加载条完成其错误状态时，应更改其parent状态。
• onProgressDone：应将父级的进度状态设置为0。

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