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

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

import Nerv from "nervjs";
import { Text, View, Image } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { isNumber, generateId, classNames } from "../../lib/index";
import { BG_COLOR_LIST } from "../../lib/model";

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

    const [headList, setHeadList] = Taro.useState(props.headerArray);
    Taro.useEffect(() => {
      const list = props.headerArray || [];
      setHeadList(list.map(item => {
        item.cu_avatar_id = generateId();
        return item;
      }));
    }, [props.headerArray]);
    const onClick = () => {
      props.onClick && props.onClick();
    };
    const customSize = {
      small: 48,
      normal: 64,
      large: 96,
      xlarge: 128
    };
    const width = isNumber(props.size) ? Taro.pxTransform(props.size) : Taro.pxTransform(customSize[props.size || "normal"]);
    const height = isNumber(props.size) ? Taro.pxTransform(props.size) : Taro.pxTransform(customSize[props.size || "normal"]);
    const em = isNumber(props.size) ? props.size / 48 : customSize[props.size || "normal"] / 48;
    const avatarArray = headList.map((item, index) => <View key={item.cu_avatar_id || index} className={`${props.shape} ${BG_COLOR_LIST[item.bgColor || "black"]} ${props.shadow ? "shadow" : ""} cu-avatar`} style={{
      width,
      height,
      fontSize: `${em}em`
    }}>
        <Image className={`${props.shape}`} src={item.url} style={{
        width,
        height,
        position: "absolute",
        left: 0,
        right: 0,
        bottom: 0,
        top: 0
      }} mode="aspectFill" />
        <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>);
    const avatarArrayComponent = <View className={classNames("cu-avatar-group", props.className)} style={Object.assign({}, props.style)} onClick={() => {
      onClick();
    }}>
      {avatarArray}
    </View>;
    return props.headerArray && props.headerArray.length > 1 ? avatarArrayComponent : <View className={classNames(props.className)} style={Object.assign({}, props.style)} onClick={() => {
      onClick();
    }}>
      {avatarArray}
    </View>;
  }

}

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