自己封装vue组建之Stone-Steps组件

Stone-Steps组件

1. Stone-Steps组件引入
1. stone-steps标签
1. Stone-Steps组件示例

1. Stone-Steps组件引入

在main.js中引入stone-steps.scss

require('@/assets/css/stone-steps.scss')

在您的vue中导入StoneSteps组件

import StoneSteps from '@/components/StoneSteps'

注册StoneSteps组件

export default {
  name: 'StoneStepsDemo',
  components: {
    StoneSteps
  }
}

2. stone-steps标签

属性：

steps - 对象数组，必填;
step-desc - 从steps元素对象中获取步骤描述新的key名，可选，默认是description;
current - 当前步骤，可选，默认1

3. Stone-Steps组件示例

在这里插入图片描述

源码：

<template>
  <div class="app-container">
    <stone-steps :steps="steps" step-desc="desc" :current="currentStep" style="width: 60%;" />
  </div>
</template>
<script>
import StoneSteps from '@/components/StoneSteps'
export default {
  name: 'StoneStepsDemo',
  components: {
    StoneSteps
  },
  data() {
    return {
      steps: [
        {
          desc: 'Step 1'
        },
        {
          desc: 'Step 2'
        },
        {
          desc: 'Step 3'
        },
        {
          desc: 'Step 4'
        }
      ],
      currentStep: 3
    }
  }
}
</script>