UAvatar3 头像
顶部导航栏或页面中局部使用的用户头像。扩展自 Proto UI 的 UAvatar 组件。
准备
安装
npm i --save @proto-ui/u-avatar-3.vue
引入
直接注册
import UAvatar from '@proto-ui/u-avatar-3.vue';
Vue.component('u-avatar', UAvatar);
或者使用 vusion-utils 安装(常用于同时安装多个组件)
import { install } from 'vusion-utils';
import UAvatar from '@proto-ui/u-avatar-3.vue';
install(Vue, { UAvatar });
使用
使用时,记得将示例中的组件名替换成你在项目中实际注册的组件名。
示例
基本用法
<u-linear-layout direction="vertical">
<div><u-avatar-3 shape="square"></u-avatar-3> 王小明</div>
</u-linear-layout>
大小扩展
<u-linear-layout direction="vertical">
<div><u-avatar-3 shape="square" size="mini"></u-avatar-3> 王小明(迷你)</div>
<div><u-avatar-3 shape="square" size="small"></u-avatar-3> 王小明(小)</div>
<div><u-avatar-3 shape="square"></u-avatar-3> 王小明(正常)</div>
<div><u-avatar-3 shape="square" size="large"></u-avatar-3> 王小明(大)</div>
<div><u-avatar-3 shape="square" size="huge"></u-avatar-3> 王小明(大)</div>
</u-linear-layout>
自定义图片
<u-avatar-3><img src="~proto-ui.vusion/src/components/u-avatar.vue/assets/music.png"></u-avatar-3> 多多
配合 UBadge 使用
<u-badge :value="3" corner dot>
<u-avatar-3></u-avatar-3>
</u-badge>
<br/><br/>
<u-badge :value="3" corner dot>
<u-avatar-3 shape="square"></u-avatar-3>
</u-badge>
<br/><br/>
<u-badge :value="120" :max="99" corner>
<u-avatar-3></u-avatar-3>
</u-badge>
<br/><br/>
<u-badge :value="120" :max="99" corner>
<u-avatar-3 shape="square"></u-avatar-3>
</u-badge>
配合 UNavbar 使用
<u-navbar>
<u-navbar-item to="/components">组件</u-navbar-item>
<u-navbar-item>概念</u-navbar-item>
<u-navbar-item disabled>指令</u-navbar-item>
<u-navbar-divider></u-navbar-divider>
<u-navbar-item>配置</u-navbar-item>
<div slot="right">
<u-navbar-item>
<u-avatar-3 shape="square"></u-avatar-3> 王小明
</u-navbar-item>
</div>
</u-navbar>
<u-navbar>
<u-navbar-item to="/components">组件</u-navbar-item>
<u-navbar-item>概念</u-navbar-item>
<u-navbar-item disabled>指令</u-navbar-item>
<u-navbar-divider></u-navbar-divider>
<u-navbar-item>配置</u-navbar-item>
<u-navbar-dropdown slot="right">
<span slot="title"><u-avatar-3 shape="square"></u-avatar-3> 王小明</span>
<u-navbar-menu>
<u-navbar-menu-item>Basic</u-navbar-menu-item>
<u-navbar-menu-item>Layout</u-navbar-menu-item>
<u-navbar-menu-item>Navigation</u-navbar-menu-item>
</u-navbar-menu>
</u-navbar-dropdown>
</u-navbar>
<u-navbar>
<u-navbar-item to="/components">组件</u-navbar-item>
<u-navbar-item>概念</u-navbar-item>
<u-navbar-item disabled>指令</u-navbar-item>
<u-navbar-divider></u-navbar-divider>
<u-navbar-item>配置</u-navbar-item>
<u-navbar-dropdown slot="right">
<span slot="title"><u-badge :value="120" :max="99" corner><u-avatar-3 shape="square"></u-avatar-3></u-badge> 王小明</span>
<u-navbar-menu>
<u-navbar-menu-item>Basic</u-navbar-menu-item>
<u-navbar-menu-item>Layout</u-navbar-menu-item>
<u-navbar-menu-item>Navigation</u-navbar-menu-item>
</u-navbar-menu>
</u-navbar-dropdown>
</u-navbar>
API
Props/Attrs
Prop/Attr | Type | Default | Description |
---|---|---|---|
shape | String | 'circle' |
形状。可选值:circle , square 两种类型 |
size | String | 'normal' |
头像大小。可选值:'mini' 、'small' 、'normal' 、'large' 、'huge' 。如需自定义大小,可以直接设置style="width: 40px; height: 40px;"
|
Slots
(default)
添加自定义图片或内容。