vue.js手写进度环_Vue.js的灵活进度栏-CSDN博客

本文介绍了如何使用vue-simple-progress库在Vue.js中创建一个轻量级且配置简单的进度条。该组件通过计算样式实现样式定义，无需外部CSS文件。安装可通过NPM，也可直接在HTML中引入脚本标签。提供了ES6和全局变量（脚本标签）两种使用方式。

摘要由CSDN通过智能技术生成

vue.js手写进度环

vue-simple-progress (vue-simple-progress)

A simple, flexible progress bar for Vue.js

Vue.js的简单灵活的进度条

vue-simple-progress is designed to be a lightweight Vue.js progress bar requiring minimal configuration.

vue-simple-progress设计为轻量级的Vue.js进度条，需要最少的配置。

View demo 查看演示 Download Source 下载源

安装 (Installation)

NPM (NPM)

npm install vue-simple-progress --save

用法 (Usage)

All styling for this component is done via computed styles in the Progress.vue component and requires no external CSS files.

该组件的所有样式均通过Progress.vue组件中的计算样式完成，并且不需要外部CSS文件。

ES6 (ES6)

The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

以下示例也可以与CommonJS一起使用，方法是将ES6特定的语法替换为CommonJS等效项。

import Vue from 'vue'
import ProgressBar from 'vue-simple-progress'

new Vue({
  components: {
    ProgressBar
  }
})

全局变量(脚本标签) (Globals (script tag))

Add a script tag pointing to dist/vue-simple-progress.min.js after adding Vue.

添加Vue 后，添加指向dist/vue-simple-progress.min.js的脚本标签。

Example:

例：

<html>
<head>
  ...
</head>
<body>
  <div id="app">
    <vue-simple-progress></vue-simple-progress>
  </div>

  <script src="path/to/vue.js"></script>
  <script src="path/to/vue-simple-progress.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>