关于前端:vue2stepsprogress-步骤进度条

开源地址
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

<stepsProgress :currentProgress='50' />

lineBackground

<stepsProgress :currentProgress='50' lineBackgroundColor='#ccc'lineForeground='green'/>

startLocation && endLocation

<stepsProgress:currentProgress='30':startLocation='20':endLocation='90'></stepsProgress> 

startLocation 是整个进度条起始的百分比地位

endLocation 是整个进度条完结的百分比地位

currentProgress 是 startLocation 至 endLocation 两头的百分比

demo-1-step

<stepsProgress    :currentProgress='30'    :steps="[{    progress: 0,    showRound: true,    text: 'Have to declare'    },{    progress: 100,    showRound: true,    text: 'completed'    }]"    :currentStep='1'    roundWidth='1.5em'></stepsProgress>

roundWidth

圆半径

currentStep

currentStep 是 以后进行到step的下标, currentStep之前的圆点会点亮。

steps

<stepsProgress:steps="[{    progress: 100,     // 以后圆点间隔整个进度条的left地位, 范畴:0-100    showRound: true, // 显示圆点     text: 'completed', // 圆点下方的文字,没有则不显示     foreground: 'red', // 圆点点亮的色彩     backgroundColor: '#000', // 圆点背景色}]"></stepsProgress>

demo2

<stepsProgress    :currentProgress='90'    :steps="[{        progress: 10,        showRound: true,        text: 'Have to declare'        },{        progress: 25,        showRound: true,        text: 'Have been concluded'        },{        progress: 90,        showRound: true,        text: 'completed'    }]"    :startLocation='25'    :endLocation='90'    :currentStep='2'></stepsProgress>

demo3-slot

<template>  <div class="demo">    <stepsProgress    :currentProgress='currentProgress'    :steps="[{      progress: 10,      showRound: true,      text: 'Have to declare'    },{      progress: 25,      showRound: true,      text: 'Have been concluded'    },{      progress: 58,      showRound: false,      text: 'under construction'    },{      progress: 90,      showRound: true,      text: 'completed'    }]"    :startLocation='25'    :endLocation='90'    :currentStep='2'    >      <template>        <div class="slot-currentProgress">          {{currentProgress}}        </div>      </template>      <template #text='{item}'>        <span v-if="item.text == 'under construction'" class="text">          {{item.text}} <span style="color:red">icon</span>        </span>        <span v-else class="text">          {{item.text}}        </span>      </template>    </stepsProgress>  </div></template><script>import stepsProgress from 'vue2-steps-progress'export default {  components: {    stepsProgress,  },  data() {    return {      currentProgress: 10    }  },}</script><style scoped>.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;}</style>