mp-colorui/dist/h5/components/steps/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）

import Nerv from "nervjs";
import { Text, View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { TEXT_COLOR_LIST } from "../utils/model";
export default class ClStep extends Component {
  constructor() {
    super(...arguments);
    this.state = {};
  }
  render() {
    const stepTypeClassName = this.props.type === 'arrow' ? 'steps-arrow' : '';
    const activeColorClassName = this.props.activeColor ? TEXT_COLOR_LIST[this.props.activeColor] : '';
    const step = this.props.step || 0;
    const tabsComponents = this.props.steps.map((item, index) => <View className={`cu-item ${step > index ? activeColorClassName : ''}`} key={index}>
        {this.props.stepTitlePosition === 'top' ? item.title : ''}
        {<Text className={`${this.props.stepIconType === 'number' ? 'num' : ''} ${this.props.stepIconType === 'custom' ? 'cuIcon-' + item.icon : ''}`} data-index={index + 1} />}
        {this.props.stepTitlePosition === 'bottom' ? item.title : ''}
      </View>);
    return <View className={`cu-steps ${stepTypeClassName}  ${this.props.stepTitlePosition === 'top' ? 'steps-bottom' : ''}`}>
        {tabsComponents}
      </View>;
  }
}
ClStep.options = {
  addGlobalClass: true
};
ClStep.defaultProps = {
  steps: [],
  type: 'line',
  activeColor: "blue",
  step: 0,
  stepIconType: "number",
  stepTitlePosition: "bottom"
};