关于前端: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>