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

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

import Taro from "@tarojs/taro-h5";
import Nerv from "nervjs";
import { Text, View } from '@tarojs/components';
import utils from "../utils/index";
import { BG_COLOR_LIST } from "../utils/model";

class ClAvatar extends Taro.Component {
  render() {
    const props = this.props;

    const onClick = () => {
      props.onClick && props.onClick();
    };
    const avatarArray = props.headerArray ? props.headerArray.map((item, index) => <View key={index} className={`${props.shape} ${utils.model.SIZE[props.size || 'normal']} ${BG_COLOR_LIST[item.bgColor || 'black']} ${props.shadow ? 'shadow' : ''} cu-avatar`} style={item.url ? { backgroundImage: `url(${item.url})` } : ''}>
        <Text className={`cuIcon-${item.icon}`}>
          {item.text ? item.text.slice(0, 1) : ''}
        </Text>
        {item.tag ? <View className={`cu-tag badge cuIcon-${item.tag} ${item.tagColor ? BG_COLOR_LIST[item.tagColor] : ''}`} /> : ''}
      </View>) : <View />;
    const avatarArrayComponent = <View className="cu-avatar-group" onClick={() => {
      onClick();
    }}>
      {avatarArray}
    </View>;
    return props.headerArray && props.headerArray.length > 1 ? avatarArrayComponent : <View onClick={() => {
      onClick();
    }}>
      {avatarArray}
    </View>;
  }

}

ClAvatar.options = {
  addGlobalClass: true
};
ClAvatar.defaultProps = {
  size: 'normal',
  shape: 'radius',
  type: 'normal',
  headerArray: [],
  shadow: true
};
export default ClAvatar;