Steps步骤条—microbee-http 丨软件开发框架

microbee-http 丨软件开发框架

microbee-http 丨软件开发框架 > 快速开始 > MICROBEE-FRONT > 框架工具组件 > Steps步骤条

Steps步骤条

基本用法：

创建实例: let stepBar = McrbHttpClient.stepBar(containerId);
渲染: stepBar.render(options);
设置当前步骤数: stepBar.setCurrentVal(val);
获取当前步骤数: stepBar.getCurrentVal();
获取当前步骤 - 自定义数据： stepBar.getExtData();

参数说明：

名称	类型	描述
containerId	string	装载容器的id
options	object	步骤条配置参数

options参数说明：

名称	类型	描述
current	number	当前步骤
waitColor	string	默认颜色（未执行步骤颜色）
processColor	string	当前步骤颜色
finishColor	string	已完成步骤颜色
alignCenter	boolean	是否居中对齐（默认false, true）
finishStatus	string	finish(默认，只改变颜色)，success成功对勾样式
simple	boolean	是否简洁版 (默认false, true时alignCenter、description失效)
iconType	boolean	是否带图标（默认false, true时finishStatus失效）
direction	string	显示方向（默认horizontal, vertical（纵向）/horizontal（水平）；当direction=vertical时simple、alignCenter,description失效）
data	arrary	步骤数据（必填）

options.data参数说明：

名称	类型	描述
title	string	名称（必填）
description	string	描述（选填；当simple=true或direction=vertical时，description失效不显示）
icon	string	默认图标（当iconType=true时必填，iconType=false时失效）
icon_process	string	当前步骤图标（当iconType=true时必填，iconType=false时失效）
icon_finish	string	已完成步骤图标（当iconType=true时必填，iconType=false时失效）
extData	string/object/arrary	自定义数据（选填）

基础版：设置finishColor、processColor、waitColor颜色

// 容器 <div id="steps_id1"></div> // 加载渲染 let stepBar1 = McrbHttpClient.stepBar('steps_id1'); stepBar1.render({ current: 2, finishColor: '#59c04d', processColor: '#1afa29', waitColor: '#999999', data: [ {title:'步骤1',extData:'0001'}, {title:'步骤2',extData:'0002'}, {title:'步骤3',extData:'0003'}, {title:'步骤4',extData:'0004'}, {title:'步骤5',extData:'0005'}, ] }); // 设置当前步骤数 stepBar1.setCurrentVal(4); // 获取当前步骤数 var cutVal = stepBar1.getCurrentVal(); console.log(cutVal); // 输出 4 // 获取当前步骤 - 自定义数据 var cutData = stepBar1.getExtData(); console.log(cutData); // 输出 0004

基础版：设置finishColor、processColor、waitColor颜色；finishStatus = 'success'

// 容器
       <div id="steps_id2"></div>
       // 加载渲染
       let stepBar2 = McrbHttpClient.stepBar('steps_id2');
       stepBar2.render({
           current: 3,
           finishColor: '#59c04d',
           processColor: '#1afa29',
           waitColor: '#999999',
           // success - finish(默认)
           finishStatus: 'success',
           data: [{title:'步骤1',},{title:'步骤2',},{title:'步骤3',},{title:'步骤4',},{title:'步骤5',},]
       });

基础版：设置finishColor、processColor、waitColor颜色；iconType = true带图标的步骤条

// 容器
       <div id="steps_id3"></div>
       // 加载渲染
       let stepBar3 = McrbHttpClient.stepBar('steps_id3');
       stepBar3.render({
           current: 4,
           finishColor: '#59c04d',
           processColor: '#1afa29',
           waitColor: '#999999',
           iconType: true, // 则显示图标
           // alignCenter: true,
           data: [
               {title:'步骤1', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
               {title:'步骤2', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
               {title:'步骤3', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
               {title:'步骤4', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
               {title:'步骤5', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
           ]
       });

基础版：设置finishColor、processColor、waitColor颜色；居中对其alignCenter = true和描述description

       // 容器
       <div id="steps_id6"></div>
       // 加载渲染
       let stepBar6 = McrbHttpClient.stepBar('steps_id6');
       stepBar6.render({
           current: 1,
           finishColor: '#2ecc71',
           processColor: '#409eff',
           waitColor: '#999',
           // success - finish(默认)
           finishStatus: 'success',
           alignCenter: true,
           data: [
               {title:'步骤1', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'},
               {title:'步骤2', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'},
               {title:'步骤3', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'},
               {title:'步骤4', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'},
               {title:'步骤5', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'},
           ]
       });

简洁版：设置finishColor、processColor、waitColor颜色；simple = true简洁版

       // 容器
       <div id="steps_id4"></div>
       // 加载渲染
       let stepBar4 = McrbHttpClient.stepBar('steps_id4');
       stepBar4.render({
           current: 3,
           finishColor: '#59c04d',
           processColor: '#1afa29',
           waitColor: '#999999',
           simple: true,
           // finishStatus: 'success',
           data: [
               {title:'步骤0001', description:'几点开会艰苦环境和尽快'},
               {title:'步骤0002', description:'几点开会艰苦环境和尽快'},
               {title:'步骤0003', description:'几点开会艰苦环境和尽快'},
               {title:'步骤0004', description:'几点开会艰苦环境和尽快'},
               {title:'步骤0005', description:'几点开会艰苦环境和尽快'},
           ]
       });

简洁版：设置finishColor、processColor、waitColor颜色；simple = true简洁版；iconType = true带图标的步骤条

       // 容器
       <div id="steps_id5"></div>
       // 加载渲染
       let stepBar5 = McrbHttpClient.stepBar('steps_id5');
       stepBar5.render({
           current: 2,
           finishColor: '#59c04d',
           processColor: '#1afa29',
           waitColor: '#999999',
           iconType: true, // 带图标
           simple: true,
           data: [
               {title:'步骤1', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
               {title:'步骤2', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
               {title:'步骤3', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
               {title:'步骤4', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
               {title:'步骤5', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png'},
           ]
       });

简洁版：设置finishColor、processColor、waitColor颜色；simple = true简洁版；iconType = true带图标的步骤条；extData自定义数据

               // 容器
               <div id="steps_id7"></div>
               // 加载渲染
               let stepBar7 = McrbHttpClient.stepBar('steps_id7');
               stepBar7.render({
                   current: 3,
                   finishColor: '#59c04d',
                   processColor: '#1afa29',
                   waitColor: '#999999',
                   iconType: true, // 则显示图标
                   simple: true,
                   data: [
                       {title:'步骤1', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png',extData:'111'},
                       {title:'步骤2', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png',extData:{id:'112',name:'鳄鱼'}},
                       {title:'步骤3', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png',extData:[{id:'113',name:'袋鼠'},{id:'114',name:'恐龙'}]},
                       {title:'步骤4', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png',extData:''},
                       {title:'步骤5', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png',},
                   ]
               });
               // 获取 - 当前步骤数
               console.log(stepBar7.getCurrentVal()); // 3
               // 获取 - 当前步骤 - 自定义数据
               console.log(stepBar7.getExtData()); // [{id:'113',name:'袋鼠'},{id:'114',name:'恐龙'}]

简洁版：设置finishColor、processColor、waitColor颜色；direction = vertical纵向；

               // 容器
               <div id="steps_id8"></div>
               // 加载渲染
               let stepBar8 = McrbHttpClient.stepBar('steps_id8');
               stepBar8.render({
                   current: 1,
                   finishColor: '#59c04d',
                   processColor: '#1afa29',
                   waitColor: '#999999',
                   // iconType: true, // 则显示图标
                   // vertical（纵向）/horizontal（水平）,
                   direction: 'vertical',
                   data: [
                       {title:'步骤1', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快', extData:'111'},
                       {title:'步骤2', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快', extData:{id:'112',name:'鳄鱼'}},
                       {title:'步骤3', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快', extData:[{id:'113',name:'袋鼠'},{id:'114',name:'恐龙'}]},
                       {title:'步骤4', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快', extData:''},
                       {title:'步骤5', icon:'https://mhc.ixiera.com/img/step_wiait1.png', icon_process:'https://mhc.ixiera.com/img/step_process1.png', icon_finish:'https://mhc.ixiera.com/img/step_finish1.png', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快',},
                   ]
               });
               // 设置 - 当前步骤数
               stepBar8.setCurrentVal(2);
               // 获取 - 当前步骤数
               console.log(stepBar8.getCurrentVal()); // 2
               // 获取 - 当前步骤 - 自定义数据
               console.log(stepBar8.getExtData()); // {id: '112', name: '鳄鱼'}

本文档来自—microbee-http 丨软件开发框架平台

返回顶部
热线电话
15201074279
微信
扫一扫
立即加微信