vue2-steps-progress 步驟進度條

個人網站
https://kuangyx.cn
開源地址
gitee https://gitee.com/tomiaa/vue2-steps-progress
github https://github.com/tomiaa12/vue2-steps-progress

預覽

安裝

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

<stepsProgress :currentProgress='50' />

lineBackground

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

prop	type	default
lineBackgroundColor	String	#dcdcdc
lineForeground	String	#019879

startLocation && endLocation

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

prop	type	default
startLocation	Number	0
endLocation	Number	100

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>

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

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>