vue 进度条 插件_基于vue的级联进度条插件

vue 进度条 插件

延进步 (yan-progress)

This is a cascading progress bar plugin based on vue.

这是一个基于vue的级联进度栏插件。

安装 (Install)

$ yarn add yan-progress

快速启动 (Qucik start)

App.vue

应用程序

<template>
    <div>
        <yan-progress :total="100" :done="60" :modify="30" />
    </div>
</template>

index.js

index.js

import Vue from 'vue';
import YanProgress from 'yan-progress';
import App from './App.vue';

Vue.use(YanProgress);

new Vue({
  el: '#app',
  render: h => h(App)
});

例 (Example)

Check this file in index.html

在index.html检查此文件

API (API)

params	description	type	default
total	The total of progress	number	—
done	The number of done	number	—
modify	The number of modified base on done	number	—
tip	Custom Style (Array contains 3 items, in turn: uncomplete, done, and modified, each item configuration as shown in iTipConfig below)	iTipConfig	—

参数	描述	类型	默认
总	总进度	数	-
做完了	完成次数	数	-
修改	修改完成数量	数	-
小费	自定义样式(数组包含3个项目，依次为：未完成，已完成和已修改，每个项目配置如下面的iTipConfig中所示)	iTipConfig	-

iTipConfig

iTipConfig

params	description	type	memo
text	The tooltip text ('X'is a placeholder)	string	The color type same with CSS
fillStyle	The background color of progress bar	string	The color type same with CSS

参数	描述	类型	备忘录
文本	工具提示文字(“ X”是占位符)	串	颜色类型与CSS相同
fillStyle	进度条的背景色	串	颜色类型与CSS相同

翻译自: https://vuejsexamples.com/a-cascading-progress-bar-plugin-based-on-vue/

vue 进度条 插件