vue2-steps-progress|vue2-steps-progress 步骤进度条
开源地址
gitee https://gitee.com/tomiaa/vue2...
github https://github.com/tomiaa12/v...
预览
文章图片
安装
npm i vue2-steps-progress开始 main.js
import stepsProgress from 'vue2-steps-progress'
Vue.use(stepsProgress);
or
import stepsProgress from 'vue2-steps-progress'
export default {
components: {
stepsProgress,
}
}模板 currentProgress
| prop | type | default |
|---|---|---|
| currentProgress | Number | 0 |
文章图片
lineBackground
文章图片
| prop | type | default |
| lineBackgroundColor | String | \#dcdcdc |
| lineForeground | String | \#019879 |
| prop | type | default |
| startLocation | Number | 0 |
| endLocation | Number | 100 |
endLocation 是整个进度条结束的百分比位置
currentProgress 是 startLocation 至 endLocation 中间的百分比
【vue2-steps-progress|vue2-steps-progress 步骤进度条】
文章图片
demo-1-step
文章图片
| prop | type | default |
|---|---|---|
| steps | Array | |
| currentStep | Number | 0 |
| roundWidth | string | 1em |
currentStep currentStep 是 当前进行到step的下标, currentStep之前的圆点会点亮。
steps
demo2
文章图片
demo3-slot
{{currentProgress}}
{{item.text}} icon{{item.text}}.demo{
width: 1000px;
height: 50px;
margin: 100px auto;
}
.slot-currentProgress{
position: relative;
background-color: rgb(1, 152, 121);
width: 2em;
border-radius: 50%;
line-height: 2;
color: white;
}
.slot-currentProgress::before{
content: '';
position: absolute;
bottom: -.2em;
left: 50%;
width: 1em;
height: 1em;
background-color: inherit;
z-index: -1;
transform:translateX(-50%) rotate(-45deg);
}
.text{
position: absolute;
font-size: 0.16rem;
top: 120%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}文章图片
推荐阅读
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 2.如何确立组织目标（）
- django2.2|django2.2 一般项目步骤（初步）
- Android自定义view实现圆环进度条效果
- Flutter自定义view|Flutter自定义view —— 闯关进度条
- vue|vue canvas 手绘进度条动画
- 适用于小白（VSCode搭建Vue项目，最详细的搭建步骤哦）
- Centos6源码编译安装2.4版本http服务步骤
- win10重装步骤
- 我写文章的9+N个步骤，直接分享给你！