Avatar 头像
概述
用来代表用户或事物，支持图片或字符展示。
使用指南
在.vue中引入组件
<script>
import iAvatar from 'iview-mpvue/dist/components/avatar/avatar'
export default {
components: {
'i-avatar': iAvatar
}
}
</script>在main.js中引入样式文件
import 'iview-mpvue/dist/components/avatar/style/css'示例
<i-panel title="圆形"></i-panel>
<i-row i-class="row-class">
<i-col span="8">
<i-avatar size="small">梁</i-avatar>
</i-col>
<i-col span="8">
<i-avatar>梁</i-avatar>
</i-col>
<i-col span="8">
<i-avatar size="large">梁</i-avatar>
</i-col>
</i-row>
<i-panel title="方形"></i-panel>
<i-row i-class="row-class">
<i-col span="8">
<i-avatar size="small" shape="square">A</i-avatar>
</i-col>
<i-col span="8">
<i-avatar shape="square">A</i-avatar>
</i-col>
<i-col span="8">
<i-avatar size="large" shape="square">A</i-avatar>
</i-col>
</i-row>
<i-row i-class="row-class">
<i-col span="8"></i-col>
<i-col span="8"></i-col>
<i-col span="8"></i-col>
</i-row>
<i-panel title="图片"></i-panel>
<i-row i-class="row-class">
<i-col span="8">
<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small"></i-avatar>
</i-col>
<i-col span="8">
<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="default"></i-avatar>
</i-col>
<i-col span="8">
<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="large"></i-avatar>
</i-col>
</i-row>
<i-row i-class="row-class">
<i-col span="8">
<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small" shape="square"></i-avatar>
</i-col>
<i-col span="8">
<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="default" shape="square"></i-avatar>
</i-col>
<i-col span="8">
<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="large" shape="square"></i-avatar>
</i-col>
</i-row>API
Avatar properties
Last updated