Vuejs的简单进度条组件 - vue-progressbar-component

Vuejs的简单进度条组件 - vue-progressbar-component
插件名称 vue-progressbar-component
发布时间 2020年10月11日
插件作者 EvodiaAut

一个简单的Vue.js progressbar组件,该组件使用硬件加速的CSS来实现平滑和高性能的动画。

安装和下载:

# Yarn
$ yarn add vue-progressbar-component

# NPM
$ npm install vue-progressbar-component --save

用法

最常见的用例是全局注册组件。

import Vue from 'vue'
import ProgressBar from 'vue-progressbar-component'

Vue.component('progress-bar', ProgressBar)

或者,您可以执行以下操作来注册组件:

import ProgressBar from 'vue-progressbar-component'

export default {
  name: 'HelloWorld',
  components: {
    ProgressBar
  }
}

现在,您可以在页面上使用html,如下所示:

<!-- 简单的进度条 -->
<progress-bar
  :value="77"
/>

<!-- 添加类(颜色) -->
<progress-bar
  :value="88"
  bar-class="bg-success"
/>

<!-- 从右改变起点 -->
<progress-bar
  :value="95"
  origin="right"
/>

<!-- 将scaleX改为scaleY,原点改为bottom -->
<progress-bar
  :value="88"
  scale="Y"
  origin="bottom"
/>