vue线性渐变_Vue线性进度条

vue线性渐变 k进度 (k-progress)A Vue plugin, linear progress bar.Vue插件，线性进度条。View Demo查看演示 View Github查看Github????安装 (???? Install)npm install -S k-progress# oryarn add k-progress????开始开始 (???? Begin Star...

cuk5239

2003人浏览 · 2020-07-31 17:25:22

cuk5239 · 2020-07-31 17:25:22 发布

vue线性渐变

k进度 (k-progress)

A Vue plugin, linear progress bar.

Vue插件，线性进度条。

View Demo 查看演示 View Github 查看Github

📦安装 (📦 Install)

npm install -S k-progress
# or
yarn add k-progress

🔨开始开始 (🔨 Begin Start)

// main.js
import KProgress from 'k-progress';
Vue.component('k-progress', KProgress);

s属性 (📔 Attributes)

Attribute	Type	Default	Optional	explain
percent	Number	0	0-100	Percent (Required)
line-height	Number	6		Progress bar height
type	String	`line`	`line` / `lump`	Progress bar type
status	String		`success` / `warning` / `error`	Progress bar status
color	String / Array / Function			Progress bar color; When using `Array`, the limit is 6; When using `Function`, the argument is `percent`
color-flow	Boolean	`false`		Whether to enable color flow
flow-second	Number	5	1-6	The time required for the flow, that is, the smaller the time, the faster the speed
bg-color	String	`#ebeef5`	Color code	Progress bar background color
border	Boolean	`true`		Whether arc
show-text	Boolean	`true`		Whether to show progress bar text
format	Function			Custom text display, parameter is `percent`
cut-width	Number	1		`lump` width
cut-color	String	`#ebeef5`	Color code	`lump` color
active	Boolean	`false`		Whether to enable dynamic effects
active-color	String			Dynamic effect color

属性	类型	默认	可选的	说明
百分	数	0	0-100	百分比(必填)
行高	数	6		进度条高度
类型	串	`line`	`line` / `lump`	进度条类型
状态	串		`success` / `warning` / `error`	进度栏状态
颜色	字符串/数组/函数			进度条颜色；使用`Array` ，限制为6；使用`Function` ，参数为`percent`
色流	布尔型	`false`		是否启用色彩流
流量秒	数	5	1-6	流程所需的时间，即时间越短，速度越快
背景色	串	`#ebeef5`	色标	进度栏背景色
边境	布尔型	`true`		是否圆弧
显示文字	布尔型	`true`		是否显示进度条文字
格式	功能			自定义文本显示，参数为`percent`
裁切宽度	数	1个		`lump`宽
切色	串	`#ebeef5`	色标	`lump`色
活性	布尔型	`false`		是否启用动态效果
活性色	串			动态效果色

翻译自: https://vuejsexamples.com/a-vue-linear-progress-bar/

vue线性渐变

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda