头像 avater 开发中

一个朴实无华的头像

使用说明

简单引入

展开代码

<vi-avater></vi-avater>

你可以通过src指定头像图片，也可以通过默认插槽指定无图片情况下的头像

展开代码

<vi-avater>
    <vi-icon type="wode"/>
</vi-avater>

<vi-avater src="../../img/avater.jpg" alt="头像"/>

图片显示样式

通过fit控制图片显示样式,值与object-fit一致，默认为cover

展开代码

<vi-avater src="../../img/avater.png" fit="contain"/>
<vi-avater src="../../img/avater.png" fit="fill"/>
<vi-avater src="../../img/avater.png" fit="none"/>
<vi-avater src="../../img/avater.png" fit="scale-down"/>
<vi-avater src="../../img/avater.png"/>

尺寸

通过属性size定义头像大小

展开代码

<vi-avater src="../../img/avater.jpg" size="big"/>
<vi-avater src="../../img/avater.jpg"/>
<vi-avater src="../../img/avater.jpg" size="small"/>

Props

属性名	描述	类型	默认值

插槽

插槽名	描述	有无默认内容