# bz-avatar 头像

# 基本用法

用图标、图片或者字符的形式展示用户或事物信息。

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-content">
      <view class="demo-title">bz-avatar 头像</view>
      <demo-cell>
        <bz-avatar
          marginRight="10px"
          src="https://histatic.zhipin.com/front/images/oEtx5sw3SpLmSf4h6b7ERu_1076x1076.jpg"
          text="bosshi"
          width="60px"
        ></bz-avatar>
        <bz-avatar
          marginRight="10px"
          src="https://histatic.zhipin.com/front/images/oEtx5sw3SpLmSf4h6b7ERu_1076x1076.jpg"
          text="bosshi"
        ></bz-avatar>
      </demo-cell>
      <demo-cell title="文本兜底">
        <bz-avatar marginRight="10px" text="姓名" fontColor="#fff"></bz-avatar>
        <bz-avatar
          marginRight="10px"
          background="#1890ff"
          fontSize="18px"
          src="https://histatic.zhipin.com/front/images/oEtx5.jpg"
          text="姓"
        ></bz-avatar>
      </demo-cell>
      <demo-cell title="自定义圆角">
        <bz-avatar
          marginRight="10px"
          radius="10px"
          src="https://histatic.zhipin.com/front/images/oEtx5sw3SpLmSf4h6b7ERu_1076x1076.jpg"
          text="姓"
        ></bz-avatar>
        <bz-avatar marginRight="15px" text="姓名" radius="1px"></bz-avatar>
      </demo-cell>
    </view>
  </view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

展开刷新关闭

# 属性说明

属性名	类型	默认值	可选值	说明
src	String	-	-	图片资源地址
mode	String	aspectFit	参考`image`组件	图片填充模式，参考`image`组件
background	String	#D1D1D1	-	背景色
width	String	48px	-	宽度
radius	String	50%	-	圆角值
text	String	-	-	没有图片时使用文本展示
fontColor	String	#fff	-	文本字体颜色
fontSize	String	14px	-	文本字体大小
marginRight	String	-	-	快捷设置右边距
marginBottom	String	-	-	快捷设置下边距

← bz-tooltip 文本提示 bz-badge 徽标 →