Avatar 头像

用来代表用户或事物，支持图片、图标或字符展示。

效果

使用方法

<template>
  <div style="background:#f6f6f6">
    <lc-title title="头像"></lc-title>
    <category title="默认用法"></category>
    <p>内置"small","normal","large"三种尺寸规格</p>
    <div class="white-bg">
      <lc-avatar size="large"></lc-avatar>
      <lc-avatar size="normal"></lc-avatar>
      <lc-avatar size="small"></lc-avatar>
    </div>

    <category title="修改形状类型"></category>
    <div class="white-bg">
      <lc-avatar size="large" shape="square"></lc-avatar>
      <lc-avatar size="normal" shape="square"></lc-avatar>
      <lc-avatar size="small" shape="square"></lc-avatar>
    </div>

    <category title="修改背景色"></category>
    <div class="white-bg">
      <lc-avatar bgColor="#f0250f"></lc-avatar>
    </div>

    <category title="可以修改头像的内容"></category>
    <div class="white-bg">
      <lc-avatar size="large" bgIcon>U</lc-avatar>
    </div>

    <category title="修改背景图片"></category>
    <div class="white-bg">
      <lc-avatar
        bgIcon
        bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
      ></lc-avatar>
    </div>

    <category title="修改头像ICON图标"></category>
    <div class="white-bg">
      <lc-avatar
        bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
      ></lc-avatar>
    </div>

    <category title="点击头像有触发事件"></category>
    <div class="white-bg">
      <lc-avatar @activeAvatar="activeAvatar"></lc-avatar>
    </div>
  </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  data() {
    return {};
  },
  methods: {
    activeAvatar() {
      alert("点击了头像");
    }
  }
};
</script>
<style lang="less" scoped>
.white-bg {
  padding: 10px;
  background: #fff;
  display: flex;
  align-items: center;
}
p{ line-height: 26px; padding:10px; font-size: 14px;}
</style>

可配置参数

字段	说明	类型	默认值
bgColor	设置头像背景色	String	#eee
size	设置头像的大小，提供三种：large /normal/small	String	normal
shape	设置头像的形状，默认是圆形，可以设置为square方形	String	–
bgImage	设置头像的背景图片	String	–
bgIcon	设置头像的icon图标	String	–

事件回调

字段	说明	回调参数
activeAvatar	点击头像触发事件	–