示例

安装

npm install vue-step-plus --save

使用

Vue.use 注册

import Vue from "vue";
import VueStepPlus from "vue-step-plus";
import "vue-step-plus/main.css";
Vue.use(VueStepPlus);

组件引入

<script>
  import { StepPlus, StepItem } from "vue-step-plus"; 
  import "vue-step-plus/main.css";
</script>

基本使用

<template>
    <StepPlus :active="0" type="normal">
      <StepItem title="基础信息">
        基础信息
      </StepItem>
      <StepItem title="高级信息">
        高级信息
      </StepItem>
      <StepItem title="申请须知">
        申请须知
      </StepItem>
    </StepPlus>
</template>

属性

| 属性 | 属性含义 | 类型 | 默认值 | | :-------: | :--------------------------------------: | :-----: | :----: | | type | 步骤条类型('normal','line') | String | normal | | keep | true:高亮之前所有步骤,false:高亮当前步骤 | Boolean | true | | active | 当前的步骤 | Number | 0 | | showIndex | 步骤条是否显示当前的步骤数 | Boolean | true |

事件

| 事件名 | 事件含义 | 参数 | | :-------: | :--------------------------------------: | :-----: | | change | 当传入的active改变时触发 | 当前传入的的active |

type

normal line

修改主题颜色

在 import "vue-step-plus/main.css"后引入

type 为 normal

.step-container {
  .step-tab {
    .normal {
      .title {
        .title-index {
          &.active {
            color: pink;
          }
        }
      }
      &.active {
        &::after {
          border-left-color: pink;
        }
        &::before {
          border-top-color: pink;
          border-bottom-color: pink;
        }
        background-color: pink;
      }
    }
  }
}

type 为 line

.step-container {
  .step-tab {
    .line {
      .title {
        .title-index {
          &.active {
            border: 1px solid pink;
            background-color: pink;
          }
        }
      }
      &.active {
        color: pink;
        &::after {
          background-color: pink;
        }
        &::before {
          background-color: pink;
        }
      }
    }
  }
}