Vue2 -steps-progress Indicates the step progress bar

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

<stepsProgress :currentProgress='50' />
Copy the code

lineBackground

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

startLocation && endLocation

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

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

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