icon 属性的 activeColor 和 inactiveColor 无效。
官方文档给的例子自己都是错的: 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>
