Gitee gitee.com/tomiaa/vue2… Making github.com/tomiaa12/vu…

preview

The installation

npm i vue2-steps-progress
Copy the code

start

main.js

import stepsProgress from 'vue2-steps-progress'
Vue.use(stepsProgress);
Copy the code

or

import stepsProgress from 'vue2-steps-progress'
export default {
  components: {
    stepsProgress,
  }
}
Copy the code

The template

currentProgress

prop type default
currentProgress Number 0 
<stepsProgress :currentProgress='50' />
Copy the code

lineBackground

<stepsProgress 
:currentProgress='50' 
lineBackgroundColor='#ccc'
lineForeground='green'
/>
Copy the code
prop type default
lineBackgroundColor String #dcdcdc
lineForeground String # 019879

startLocation && endLocation

<stepsProgress
:currentProgress='30'
:startLocation='20'
:endLocation='90'
></stepsProgress> 
Copy the code
prop type default
startLocation Number 0
endLocation Number 100

StartLocation is the percentage position at the beginning of the progress bar

EndLocation is the percentage where the entire progress bar ends

CurrentProgress is the percentage between startLocation and 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.5 em'
></stepsProgress>
Copy the code

prop type default
steps Array
currentStep Number 0
roundWidth string 1em

roundWidth

Circle radius

currentStep

CurrentStep is the index of the currentStep, and the dots before currentStep will be lit up.

steps

<stepsProgress
:steps="[{progress: 100, // Left position of the current dot from the entire progress bar, range :0-100 showRound: true, // show the dot text: 'completed', // no foreground: 'red', // foreground color: '#000', // backgroundColor}]"
></stepsProgress>
Copy the code

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>
Copy the code

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; The font - size: 0.16 rem; top: 120%; left: 50%; transform: translateX(-50%); white-space: nowrap; } </style>Copy the code