Avatar 头像

使用指南

自动根据名称生成随机颜色背景的头像，可设置图片

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      Demo
    </p>
    <div class="t-FBH">
      <h3-avatar name="tingle" />
      <h3-avatar name="陈飞哦" />
      <h3-avatar name="何蓝逗" />
      <h3-avatar name="马天明" />
      <h3-avatar name="欧阳夏丹" />
      <h3-avatar :avatar="avatar" />
      <h3-avatar :avatar="avatar + 1" name="错误" />
    </div>
    <p class="sub-title">
      自定义颜色集合
    </p>
    <div class="t-FBH">
      <h3-avatar :colors="avatarColors" name="tingle" />
      <h3-avatar :colors="avatarColors" name="天晟" />
      <h3-avatar :colors="avatarColors" name="马天明" />
      <h3-avatar :colors="avatarColors" name="欧阳夏丹" />
      <h3-avatar :colors="avatarColors" name="钉钉" />
      <h3-avatar name="马明" specifiedColor="#F6BF26" />
    </div>
    <p class="sub-title">
      自定义大小
    </p>
    <div class="t-FBH">
      <h3-avatar :avatar="avatar" name="马天明" size="24" />
      <h3-avatar name="马天明" size="24" />
      <h3-avatar name="tingle" size="32" />
      <h3-avatar name="天晟" size="36" />
      <h3-avatar name="钉钉" size="48" />
      <h3-avatar name="欧阳阳丹" size="72" />
      <h3-avatar name="欧阳阳丹" size="96" />
      <h3-avatar name="欧阳阳丹" customSize="4rem" />
    </div>
  </div>
</template>
<script>
import H3Avatar from '@/components/h3-avatar/';

export default {
  components: {
    H3Avatar,
  },
  data () {
    return {
      avatarColors: ['#40a9ff', '#ffa940', '#ff6851', '#73d13d', '#36cfc9'],
      // eslint-disable-next-line max-len
      avatar:
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20191031/0884b1f480ee47058c82c2a3cf6f84f6.jpeg',
    };
  },
};
</script>

<style lang="less">
.t-FBH,
.t-FBV {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  > * {
    margin-right: 10px;
  }
}
.list {
  background-color: #fff;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px 15px 0;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

对旧组件进行优化，若图片加载失败默认呈现名称头像，名称头像根据尺寸调整字体大小和长度，去掉内置的h3-icon组件，改为使用默认插槽。

若要做迁移请参考

1. 弃用的props：className styleObj defaultValue avatarColors icon

2. 替换的props：

   • defaultColor => specifiedColor
   • src => avatar

3. 新增的props：sizeType customSize

API

Prop

参数	说明	类型	默认值	版本
name	标题	string	-	-
size	尺寸 内置大小范围 [12 ~ 96] 1.2.0+	string | number	40	-
customSize	自定义尺寸，当内置大小范围不满足可使用该prop，请带上单位，例如px、rem、vw	string	-	1.2.0+
sizeType	在customSize存在时生效 lg：字号大，显示两个字符 md：字号大，显示一个字符 sm：字号小，显示一个字符	string	'lg'	1.2.0+
avatar	图片 url	string	-	-
colors	用于生成随机颜色原数组，数组项内容为合法的颜色值	array	['#3392ff', '#ff9050', '#ff659b', '#2fcf9f']	-
specifiedColor	指定颜色值，优先级最高	string	-	-

Event

事件名	说明	参数
click	点击时触发	-