@proto-ui/u-avatar-1.vue v0.4.1

UAvatar1 头像

顶部导航栏或页面中局部使用的用户头像。扩展自 Proto UI 的 UAvatar 组件。

准备

安装

npm i --save @proto-ui/u-avatar-1.vue

引入

直接注册

import UAvatar from '@proto-ui/u-avatar-1.vue';

Vue.component('u-avatar', UAvatar);

或者使用 vusion-utils 安装（常用于同时安装多个组件）

import { install } from 'vusion-utils';
import UAvatar from '@proto-ui/u-avatar-1.vue';

install(Vue, { UAvatar });

使用

使用时，记得将示例中的组件名替换成你在项目中实际注册的组件名。

示例

基本用法

<u-linear-layout direction="vertical">
    <div><u-avatar-1></u-avatar-1> 王小明</div>
    <div><u-avatar-1 type="female"></u-avatar-1> 李小雪</div>
</u-linear-layout>

大小扩展

<u-linear-layout direction="vertical">
    <div><u-avatar-1 size="mini"></u-avatar-1> 王小明（迷你）</div>
    <div><u-avatar-1 size="small"></u-avatar-1> 王小明（小）</div>
    <div><u-avatar-1></u-avatar-1> 王小明（正常）</div>
    <div><u-avatar-1 size="large"></u-avatar-1> 王小明（大）</div>
    <div><u-avatar-1 size="huge"></u-avatar-1> 王小明（大）</div>
</u-linear-layout>

自定义图片

<u-avatar-1><img src="~proto-ui.vusion/src/components/u-avatar.vue/assets/music.png"></u-avatar-1> 多多

配合 UBadge 使用

<u-badge :value="3" corner dot>
    <u-avatar-1></u-avatar-1>
</u-badge>
<br/><br/>
<u-badge :value="3" corner dot>
    <u-avatar-1 type="female"></u-avatar-1>
</u-badge>
<br/><br/>
<u-badge :value="120" :max="99" corner>
    <u-avatar-1></u-avatar-1>
</u-badge>
<br/><br/>
<u-badge :value="120" :max="99" corner>
    <u-avatar-1 type="female"></u-avatar-1>
</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-1></u-avatar-1> 王小明
        </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-1></u-avatar-1> 王小明</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-1></u-avatar-1></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

Slots

(default)

添加自定义图片或内容。