嘟嘟云A sass ui框架

# 基础用法

<template>
  <db-progress :steps="5" :current="2"></db-progress>
</template>
Expand Copy

# 竖向用法

<template>
  <db-progress :steps="5" :current="2" align="column" width="40px" height="400px"></db-progress>
</template>
Expand Copy

# 错误步骤

<template>
  <db-progress :steps="5" :current="4" :errorSteps="[2, 3]"></db-progress>
</template>
Expand Copy

# 插槽运用

  • 在有插槽的模式下自动默认最后一个将会没有高度，你可以设置auto为false进入等分模式
<template>
  <div>
    <db-progress :steps="5" :current="2" align="column"  height="400px">
      <template v-slot:step1>
        输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本
      </template>
      <template v-slot:step2>
        输入文本输入文本输入文本输入文本输入文本
      </template>
      <template v-slot:step3>
        输入文本输入文本输入文本输入文本输入文本
      </template>
    </db-progress>
    
    <db-progress :steps="5" :current="2" style="margin-top:24px;" >
      <template v-slot:step1>
        输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输
      </template>
      <template v-slot:step2>
        输入文本输入文本输入文本输入文本输入文本
      </template>
      <template v-slot:step3>
        输入文本输入文本输入文本输入文本输入文本
      </template>
    </db-progress>
  </div>
</template>
Expand Copy

# 自定义内容

  • 我们可以通过设置slotText可以直接设置插槽内容
  • 我们也可以通过设置插槽两种结合，注意两种结合的情况，插槽会覆盖slotText的内容
<template>
  <db-progress align="column" :steps="[{
    text: '一',
    slotText: '通过设置`slotText`可以直接设置插槽内容'
  }, {
    text: '二',
    slotText: '通过设置`slotText`可以直接设置插槽内容'
  }, {
    text: '三',
    slotText: '通过设置`slotText`可以直接设置插槽内容'
  }, {
    text: '四'
  }]" :current="3" >
    <template v-slot:step4>
      注意两种结合的情况，插槽会覆盖`slotText`的内容
    </template>
  </db-progress>
</template>
Expand Copy

# 皮肤 mini

<template>
  <db-progress :steps="3" :current="2" mode="mini"></db-progress>
</template>
Expand Copy

# 皮肤 mini 加圆点

<template>
  <db-progress :steps="4" :current="2" mode="mini" radius align="column" height="300px" :errorSteps="[4]">
    <template v-slot:step1>
      输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输
    </template>
    <template v-slot:step2>
      输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输入文本输
    </template>
  </db-progress>
</template>
Expand Copy

# 块状样式

  • 通过icon属性可以设置全部的icon,也可以单独在数据上传输icon来设置

  • 默认开启disable-linkage属性，开启时候只要步骤上有某个步骤disable那么后续的步骤都是disable状态。关闭之后将取消这个联动

<template>
  <db-progress-block
  :steps="steps" 
  icon="DBBASEVcode"
  v-model="value"></db-progress-block>
</template>
<script>
export default {
  data() {
    return {
      value: 1,
      steps: [
        {
          text: '步骤1'
        },
        {
          text: '步骤2'
        },
        {
          text: '步骤3',
          disable: true
        },
        {
          text: '步骤4'
        }
      ]
    }
  },
}
</script>
Expand Copy

# db-progress Attributes

参数 说明 类型 可选值 默认值
steps 步骤 Number / Array — —
start 起始数字 Number — 1
mode 不同模式 String default / mini / cart default
align 对齐方式 String row / column row
line-width 线条宽度 String — -
current 当前步骤 Number — -
iconSize 图标大小 String — -
errorSteps 出错步骤 Array — []
width 宽度 String — -
height 高度 String — -
auto 是否等分默认不等分 Boolean — true
slotWidth 插槽宽度 String — -
slotHeight 插槽高度 String — -
radius 是否是圆点 Boolean — false

# db-progress-block Attributes

参数 说明 类型 可选值 默认值
steps 步骤 Array — —
value / v-model 当前选中步骤 String / Number — -
disableLinkage 禁用关联 Boolean - true
icon 图标 String - -

# db-progress-block Events

事件名称 说明 回调参数
input 步骤变化 i
change 步骤变化 item

← 对话框 dialog →