Steps 步骤条

基础用法

Steps 步骤条 - 图1

  1. {
  2.   "type": "steps",
  3.   "data": {
  4.     "active": 0
  5.   },
  6.   "options": {
  7.     "step1": "step1",
  8.     "step2": "step2",
  9.     "step3": "step3"
  10.   },
  11.   "blocks": {
  12.     "step1": {
  13.       "type": "component",
  14.       "options": {
  15.         "is": "div",
  16.         "text": "我是step1的内容"
  17.       },
  18.       "style": {
  19.         "padding": "100px"
  20.       }
  21.     },
  22.     "step2": {
  23.       "type": "component",
  24.       "options": {
  25.         "is": "div",
  26.         "text": "我是step2的内容"
  27.       },
  28.       "style": {
  29.         "padding": "100px"
  30.       }
  31.     },
  32.     "step3": {
  33.       "type": "component",
  34.       "options": {
  35.         "is": "div",
  36.         "text": "我是step3的内容"
  37.       },
  38.       "style": {
  39.         "padding": "100px"
  40.       }
  41.     }
  42.   },
  43.   "operations": {
  44.     "next": {
  45.       "type": "button",
  46.       "label": "下一步",
  47.       "props": {
  48.         "type": "primary"
  49.       }
  50.     }
  51.   },
  52.   "actions": {
  53.     "next": function() {
  54.       var t = this.block.data.active = this.block.data.active + 1;
  55.       t >= Object.keys(this.block.blocks).length && (this.block.data.active = 0, t = 0), this.setBlockData({
  56.         active: t
  57.       })
  58.     }
  59.   }
  60. }

显示配置

在线实验室

Steps 步骤条 - 图2

Steps 步骤条 - 图3

参数列表

参数说明可选值 | 类型必填
typeblock类型string是
datadata可以指定当前block的初始数据，结构和fields保持一致null | object否
config全局配置，和通过ams.config配置效果一致null | object否
style可以设置区块的外层样式null | object否
events可以配置对应事件的处理actionsnull | object否
actions可以配置具体的action处理函数null | object否
operations可以配置operation操作null | object否
blocks可以配置多个子blocknull | object否
render默认为false，配置为true则自动在body内渲染，如传入string则渲染在指定的querySelector上boolean | string否
props会透传至底层的element-ui组件作为props属性，或者是原生dom元素的属性null | object否
optionsblock特有配置null | object否