AtSteps 组件 icon 属性无效



  • icon 属性的 activeColorinactiveColor 无效。
    官方文档给的例子自己都是错的: https://taro-ui.jd.com/#/docs/steps

    import Taro from '@tarojs/taro'
    import { AtSteps } from 'taro-ui'
    export default class StepDemo extends Taro.Component {
      constructor () {
        super(...arguments)
        this.state = {
          current: 0,
        }
      }
      onChange (current) {
        this.setState({
          current
        })
      }
      render () {
        const items = [
          {
            'title': '步骤一',
            'desc': '这里是额外的信息,最多两行',
            'icon': {
              value: 'sound',
              activeColor: '#13ce66',
              inactiveColor: '#FF4949',
              size: '14',
            }
          },
          {
            'title': '步骤二',
            'desc': '这里是额外的信息,最多两行',
            'icon': {
              value: 'shopping-cart',
              activeColor: '#fff',
              inactiveColor: '#78A4FA',
              size: '14',
            }
          },
          {
            'title': '步骤三',
            'desc': '这里是额外的信息,最多两行',
            'icon': {
              value: 'camera',
              activeColor: '#fff',
              inactiveColor: '#78A4FA',
              size: '14',
            }
          }
        ]
        return (
          <AtSteps
            items={items}
            current={this.state.current}
            onChange={this.onChange.bind(this)}
          />
        )
      }
    }
    

    查看了下源码,发现 AtSteps 根本没有使用这几个属性,都写死了
    node_modules/taro-ui/dist/weapp/components/steps/index.js

                       item.status
                        ? (
                          <View className={
                            classNames({
                              'at-icon': true,
                              'at-icon-check-circle': item.status === 'success',
                              'at-icon-close-circle': item.status === 'error',
                              'at-steps__single-icon': true,
                              'at-steps__single-icon--success': item.status === 'success',
                              'at-steps__single-icon--error': item.status === 'error',
                            })
                          }
                          ></View>
                        )
                        : <View className='at-steps__circular'>
                          {
                            item.icon
                              ? (
                                <Text className={
                                  classNames('at-icon', {
                                    [`at-icon-${item.icon.value}`]: item.icon.value,
                                    'at-steps__circle-icon': true,
                                  })
                                }
                                ></Text>
                              )
                              : <Text className='at-steps__num'>{i + 1}</Text>
                          }
                        </View>
    

登录后回复