vue-step-plus v0.1.7

示例

安装

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

修改主题颜色

在 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;
        }
      }
    }
  }
}