Element UI三十一Avatar头像

简介

• el-avatar：该组件用于设置图标、图片或文字来展示用户或事物信息。其属性表入下，
• 
  
• 其子组件的slot属性取值：
• 

基础用法

• 通过shape和size属性可设置头像的形状和大小：

            <el-row>
                <el-col :span="12">
                    <div>circle</div>
                    <div>
                        <div><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                        <div v-for="size in sizeList" :key="size">
                            <el-avatar :size="size" :src="circleUrl"></el-avatar>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>square</div>
                    <div>
                        <div>
                            <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
                        </div>
                        <div v-for="size in sizeList" :key="size">
                            <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
                        </div>
                    </div>
                </el-col>
            </el-row>

<script>
  export default {
    data () {
      return {
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        sizeList: ["large", "medium", "small"]
      }
    }
  }
</script>

• 
• 虽然只设置了一行、两列，但是当第一个el-col的第一个图标占了12个分栏后，下一个图标就没地方放了，它就会自动跑到下一行，而将上一行的后12个分栏留给下一个el-col。所以虽然上图看起来好像有四行，但实际上在元素表中它只有一行。

展示类型

• 通过icon或src属性可指定展示的是图标还是图片，或者直接在组件内写内容则可以展示字符。
• 

图片加载失败的fallback行为

• 通过error事件指定是否开启图片类头像加载失败后的回调，返回false表示关闭组件默认的fallback行为，返回true则展示开启；fallback行为一般是直接在该组件下添加一个img子组件，展示一张备用图片。下例展示的就是备用图片：
• 

图片如何适应容器框

• 通过fit属性定义图片如何适应容器框，可取值fill,contain,cover,none,scale-down，默认为cover。该属性同原生属性object-fit。

• 

• 官方文档

• 代码实例：“E:\sublime text 3\Sublime Text 3\itemname2\element-starter”