im-smartjob/packages/components/avatar.vue

<script>
export default {
  name: "LemonAvatar",
  props: {
    src: String,
    icon: {
      type: String,
      default: "lemon-icon-people"
    },
    size: {
      type: Number,
      default: 32
    }
  },
  data() {
    return {
      imageFinishLoad: true
    };
  },
  render() {
    return (
      <span
        style={this.style}
        class="lemon-avatar"
        on-click={e => this.$emit("click", e)}
      >
        {this.imageFinishLoad && <i class={this.icon} />}
        <img src={this.src} onLoad={this._handleLoad} />
      </span>
    );
  },
  computed: {
    style() {
      const size = `${this.size}px`;
      return {
        width: size,
        height: size,
        lineHeight: size,
        fontSize: `${this.size / 2}px`
      };
    }
  },
  methods: {
    _handleLoad() {
      this.imageFinishLoad = false;
    }
  }
};
</script>
<style lang="stylus">
@import '~styles/utils/index'
+b(lemon-avatar)
  font-variant tabular-nums
  line-height 1.5
  box-sizing border-box
  margin 0
  padding 0
  list-style none
  display inline-block
  text-align center
  background #ccc
  color rgba(255,255,255,0.7)
  white-space nowrap
  position relative
  overflow hidden
  vertical-align middle
  border-radius 4px
  img
    width 100%
    height 100%
    display block
</style>