ant-design-vue/es/avatar/Avatar.js

An enterprise-class UI design language and Vue-based implementation

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _extends from 'babel-runtime/helpers/extends';

import Icon from '../icon';

export default {
  name: 'AAvatar',
  props: {
    prefixCls: {
      type: String,
      'default': 'ant-avatar'
    },
    shape: {
      validator: function validator(val) {
        return ['circle', 'square'].includes(val);
      },
      'default': 'circle'
    },
    size: {
      validator: function validator(val) {
        return typeof val === 'number' || ['small', 'large', 'default'].includes(val);
      },
      'default': 'default'
    },
    src: String,
    icon: String,
    alt: String,
    loadError: Function
  },
  data: function data() {
    return {
      isImgExist: true,
      scale: 1
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.prevChildren = this.$slots['default'];
    this.prevState = _extends({}, this.$data);
    this.$nextTick(function () {
      _this.setScale();
    });
  },
  updated: function updated() {
    var _this2 = this;

    if (this.preChildren !== this.$slots['default'] || this.prevState.scale !== this.$data.scale && this.$data.scale === 1 || this.prevState.isImgExist !== this.$data.isImgExist) {
      this.$nextTick(function () {
        _this2.setScale();
      });
    }
    this.preChildren = this.$slots['default'];
    this.prevState = _extends({}, this.$data);
  },

  methods: {
    setScale: function setScale() {
      var childrenNode = this.$refs.avatarChildren;
      if (childrenNode) {
        var childrenWidth = childrenNode.offsetWidth;
        var avatarWidth = this.$el.getBoundingClientRect().width;
        if (avatarWidth - 8 < childrenWidth) {
          this.scale = (avatarWidth - 8) / childrenWidth;
        } else {
          this.scale = 1;
        }
        this.$forceUpdate();
      }
    },
    handleImgLoadError: function handleImgLoadError() {
      var loadError = this.$props.loadError;

      var errorFlag = loadError ? loadError() : undefined;
      if (errorFlag !== false) {
        this.isImgExist = false;
      }
    }
  },
  render: function render() {
    var _sizeCls, _extends3;

    var h = arguments[0];
    var _$props = this.$props,
        prefixCls = _$props.prefixCls,
        shape = _$props.shape,
        size = _$props.size,
        src = _$props.src,
        icon = _$props.icon,
        alt = _$props.alt;
    var _$data = this.$data,
        isImgExist = _$data.isImgExist,
        scale = _$data.scale;


    var sizeCls = (_sizeCls = {}, _defineProperty(_sizeCls, prefixCls + '-lg', size === 'large'), _defineProperty(_sizeCls, prefixCls + '-sm', size === 'small'), _sizeCls);

    var classString = _extends(_defineProperty({}, prefixCls, true), sizeCls, (_extends3 = {}, _defineProperty(_extends3, prefixCls + '-' + shape, shape), _defineProperty(_extends3, prefixCls + '-image', src && isImgExist), _defineProperty(_extends3, prefixCls + '-icon', icon), _extends3));

    var sizeStyle = typeof size === 'number' ? {
      width: size + 'px',
      height: size + 'px',
      lineHeight: size + 'px',
      fontSize: icon ? size / 2 + 'px' : '18px'
    } : {};

    var children = this.$slots['default'];
    if (src && isImgExist) {
      children = h('img', {
        attrs: {
          src: src,

          alt: alt
        },
        on: {
          'error': this.handleImgLoadError
        }
      });
    } else if (icon) {
      children = h(Icon, {
        attrs: { type: icon }
      });
    } else {
      var childrenNode = this.$refs.avatarChildren;
      if (childrenNode || scale !== 1 && childrenNode) {
        var childrenStyle = {
          msTransform: 'scale(' + scale + ')',
          WebkitTransform: 'scale(' + scale + ')',
          transform: 'scale(' + scale + ')',
          position: 'absolute',
          display: 'inline-block',
          left: 'calc(50% - ' + Math.round(childrenNode.offsetWidth / 2) + 'px)'
        };
        var sizeChildrenStyle = typeof size === 'number' ? {
          lineHeight: size + 'px'
        } : {};
        children = h(
          'span',
          {
            'class': prefixCls + '-string',
            ref: 'avatarChildren',
            style: _extends({}, sizeChildrenStyle, childrenStyle)
          },
          [children]
        );
      } else {
        children = h(
          'span',
          {
            'class': prefixCls + '-string',
            ref: 'avatarChildren'
          },
          [children]
        );
      }
    }
    return h(
      'span',
      { on: this.$listeners, 'class': classString, style: sizeStyle },
      [children]
    );
  }
};