Steps

基础渲染

买家下单

商家接单

买家提货

交易完成

下一步

上一步

<template>
  <div>
    <d-steps :active=active>
      <d-step>买家下单</d-step>
      <d-step>商家接单</d-step>
      <d-step>买家提货</d-step>
      <d-step>交易完成</d-step>
    </d-steps>
    <d-button style="margin-top: 20px" @click="handleClick">下一步</d-button>
    <d-button style="margin-top: 20px" @click="handleClick2">上一步</d-button>
  </div>

</template>

<script>
  export default {
    data(){
      return{
        active:0,
      }
    },
    methods: {
      handleClick() {
        this.active += 1
      },
      handleClick2() {
        this.active -= 1
      },
    }
  };
</script>

自定义图标

买家下单

商家接单

买家提货

交易完成

用户评价

<template>
  <d-steps
    @click="handleClick"
    :activeIcon="'arrow_right'"
    :activeColor = "'#FF960A'"
    :inActiveIcon="'arrow_right'"
  >
    <d-step>买家下单</d-step>
    <d-step>商家接单</d-step>
    <d-step>买家提货</d-step>
    <d-step>交易完成</d-step>
    <d-step>用户评价</d-step>
  </d-steps>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

垂直渲染

买家下单
2021-07-12 12:40

商家接单

买家提货

交易完成

用户评价

<template>
  <d-steps @click="handleClick" vertical>
    <d-step>
      买家下单<br>
      2021-07-12 12:40
    </d-step>
    <d-step>商家接单</d-step>
    <d-step>买家提货</d-step>
    <d-step>交易完成</d-step>
    <d-step>用户评价</d-step>
  </d-steps>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

API

属性

名称	说明	类型	默认值
active	当前步骤	number	0
vertical	显示方向，是否水平	boolean	false
activeColor	激活状态颜色	string	#48C478
nowActiveColor	当前激活状态颜色	string
inActiveColor	未激活状态颜色	string	#969799
activeIcon	激活状态图标，可选值见 Icon 组件	string
nowActiveIcon	当前激活状态图标，可选值见 Icon 组件	string	select
inActiveIcon	未激活状态图标，可选值见 Icon 组件	string

插槽

无

事件

无

贡献者

无