头像

头像是一个 BootstrapVue 自定义组件，通常用于将用户个人资料显示为图片、图标或简短文本。 <b-avatar> 提供了几个属性用于自定义其外观，例如颜色变体和圆度，并且可以选择充当按钮、链接或路由器链接。

自 v2.8.0 起在 BootstrapVue 中提供

概述

头像是一种轻量级组件，默认情况下内联渲染，以便在任何相邻纯文本旁边垂直居中。它们还可以用作其他组件的子组件。

<template>
  <div>
    <p>Using stand-alone:<p/>
    <div class="mb-4">
      <b-avatar></b-avatar>
      <b-avatar variant="primary" text="BV"></b-avatar>
      <b-avatar variant="info" src="https://placekitten.com/300/300"></b-avatar>
      <b-avatar variant="success" icon="people-fill"></b-avatar>
    </div>
    <p>Using in components (list group) example:<p/>
    <b-list-group style="max-width: 300px;">
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar class="mr-3"></b-avatar>
        <span class="mr-auto">J. Circlehead</span>
        <b-badge>5</b-badge>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="primary" text="BV" class="mr-3"></b-avatar>
        <span class="mr-auto">BootstrapVue</span>
        <b-badge>12</b-badge>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="info" src="https://placekitten.com/300/300" class="mr-3"></b-avatar>
        <span class="mr-auto">Super Kitty</span>
        <b-badge>9</b-badge>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="success" icon="people-fill" class="mr-3"></b-avatar>
        <span class="mr-auto">ACME group</span>
        <b-badge>7</b-badge>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<!-- b-avatar.vue -->

头像类型

头像内容可以是图像、图标或简短文本字符串。当未指定其他内容时，头像内容默认为 'person-fill' 图标。

您还可以通过默认插槽提供自定义内容，尽管您可能需要对内容应用额外的样式。

图像内容

使用 src 属性指定用作头像内容的图像 URL。图像的纵横比应为 1:1（即宽度和高度应相等），否则会发生图像纵横比失真。图像将按比例放大或缩小以适应头像的边界框。

<template>
  <div class="mb-2">
    <b-avatar src="https://placekitten.com/300/300"></b-avatar>
    <b-avatar src="https://placekitten.com/300/300" size="6rem"></b-avatar>
  </div>
</template>

<!-- b-avatar-src.vue -->

注意

使用模块打包器和项目相对图像 URL 时，请参阅组件 img src 解析参考部分以获取更多详细信息。
src 属性优先于 icon 和 text 属性。
2.11.0+ 如果图像加载失败，头像将回退到 icon 或 text 属性的值。如果未提供 icon 或 text 属性，则将显示默认头像图标。此外，当图像加载失败时，将触发 img-error 事件。
变体颜色在使用通常不可见的图像时，除非图像加载失败。当图像头像也是可操作头像时，变体会影响焦点样式。

图标内容

通过 icon 属性轻松使用 BootstrapVue 的图标作为头像内容。该属性应设置为有效的图标名称。图标将相对于 size 属性进行缩放。

<template>
  <div class="mb-2">
    <b-avatar icon="people-fill"></b-avatar>
    <b-avatar icon="star-fill"></b-avatar>
    <b-avatar icon="music-note"></b-avatar>
    <b-avatar icon="star-fill" size="4em"></b-avatar>
  </div>
</template>

<!-- b-avatar-icon.vue -->

注意

提供 BootstrapVue 图标名称时，必须确保已注册相应的图标组件（在组件/页面本地或全局），如果不使用完整的 BootstrapVueIcons 插件。
icon 属性优先于 text 属性。
如果未提供 text、src 或 icon 属性并且默认插槽没有内容，则将使用 person-fill 图标。

文本内容

你可以通过 text 属性指定一个短字符串作为头像的内容。该字符串应简短（1 到 3 个字符），并且将通过 CSS 转换为全大写。字体大小将根据 size 属性设置进行缩放。

<template>
  <div class="mb-2">
    <b-avatar text="BV"></b-avatar>
    <b-avatar text="a"></b-avatar>
    <b-avatar text="Foo"></b-avatar>
    <b-avatar text="BV" size="4rem"></b-avatar>
  </div>
</template>

<!-- b-avatar-text.vue -->

自定义内容

使用 default 插槽在头像中呈现自定义内容，以便更精细地控制其外观，或使用自定义图标或 SVG，例如：

<b-avatar><custom-icon></custom-icon></b-avatar>

多行文本示例

<template>
  <div class="mb-2">
    <b-avatar size="4em">Hello<br>World</b-avatar>
    <b-avatar size="4em">你好<br>世界</b-avatar>
  </div>
</template>

<!-- b-avatar-default-slot-multi-line.vue -->

注意

默认插槽优先于 text、src 和 icon 属性。
默认插槽内容将被包装在 <span> 元素中，以确保正确居中。
你可能需要对自定义内容应用额外的样式，以补偿头像组件的形状。

样式

变体

使用 variant 属性指定 Bootstrap 主题变体颜色之一。默认变体是 secondary。

<template>
  <div>
    <b-avatar variant="secondary"></b-avatar>
    <b-avatar variant="primary"></b-avatar>
    <b-avatar variant="dark"></b-avatar>
    <b-avatar variant="light"></b-avatar>
    <b-avatar variant="success"></b-avatar>
    <b-avatar variant="danger"></b-avatar>
    <b-avatar variant="warning"></b-avatar>
    <b-avatar variant="info"></b-avatar>
  </div>
</template>

<!-- b-avatar-variant.vue -->

如果你已通过 SASS 主题变量定义了其他自定义变体，则还可以使用这些自定义变体。

尺寸

默认情况下，头像大小为 2.5em（相对于当前字体大小）。你可以通过更改当前字体大小来更改头像的大小，或使用属性 size 指定明确的大小。大小 sm、md 和 lg 的默认值分别为 1.5em、2.5em 和 3.5em。数字将转换为像素值。任何其他值必须包含单位（例如 px、em 或 rem）。

<template>
  <div>
    <b-avatar></b-avatar>
    <b-avatar size="sm"></b-avatar>
    <b-avatar size="lg"></b-avatar>
    <b-avatar :size="24"></b-avatar>
    <b-avatar size="3em"></b-avatar>
    <b-avatar size="72px"></b-avatar>
  </div>
</template>

<!-- b-avatar-size.vue -->

注意：头像始终以 1:1 的纵横比呈现。

正方形

更喜欢正方形头像？只需将 square 属性设置为 true。

<template>
  <div>
    <b-avatar square></b-avatar>
  </div>
</template>

<!-- b-avatar-square.vue -->

圆角

<b-avatar> 呈现为圆形边框半径。你可以通过将 rounded 属性设置为 true、'sm'、'lg'、'top'、'left'、'right' 或 'bottom' 之一的值来更改圆角。当设置为 true（或空字符串 ''）时，它使用中等圆角的 Bootstrap 默认值。

<template>
  <div>
    <b-avatar rounded="sm"></b-avatar>
    <b-avatar rounded></b-avatar>
    <b-avatar rounded="lg"></b-avatar>
    <b-avatar rounded="top"></b-avatar>
    <b-avatar rounded="left"></b-avatar>
    <b-avatar rounded="right"></b-avatar>
    <b-avatar rounded="bottom"></b-avatar>
  </div>
</template>

<!-- b-avatar-rounding.vue -->

注意

square 属性优先于 rounded 属性。
或者，除了 square 属性，你还可以将 rounded 属性设置为字符串 '0' 以实现正方形头像。

对齐

默认情况下，<b-avatar> 将与其相邻的内容垂直居中。在某些情况下，你可能需要更改对齐方式，例如确保仅文本头像将其文本与相邻文本对齐。只需在组件上设置一个垂直对齐实用工具类，例如 <b-avatar class="align-baseline" ...> 或 <b-avatar class="align-top" ...> 等。

可操作头像

轻松创建对点击做出响应的头像，或在点击时更改 URL/路由的头像。可操作头像将出现在文档选项卡序列中，并且对于屏幕阅读器和仅键盘用户都可以访问。

当图像头像可操作时，在悬停时对图像采用基本的缩放变换。

按钮

想要触发模态框打开或触发操作？设置 button 属性来指示 <b-avatar> 作为 <button> 元素渲染。作为按钮渲染时，组件会在每次点击时发出 click 事件。

<template>
  <b-list-group>
    <b-list-group-item>
      <b-avatar button @click="onClick" variant="primary" text="FF" class="align-baseline"></b-avatar>
      Button Text Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar button @click="onClick" src="https://placekitten.com/300/300"></b-avatar>
      Button Image Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar button @click="onClick" icon="star-fill" class="align-center"></b-avatar>
      Button Icon Avatar
    </b-list-group-item>
  </b-list-group>
</template>

<script>
  export default {
    methods: {
      onClick() {
        this.$bvModal.msgBoxOk('User name: Fred Flintstone', {
          title: 'User Info',
          size: 'sm',
          buttonSize: 'sm',
          okVariant: 'success',
          headerClass: 'p-2 border-bottom-0',
          footerClass: 'p-2 border-top-0'
        })
      }
    }
  }
</script>

<!-- b-avatar-button.vue -->

属性 button-type 可用于控制要渲染的按钮类型。支持的值为 'button'（默认值）、'submit' 或 'reset'。

链接

想要一个头像作为链接或路由器链接？只需分别设置 href 或 to 属性即可。 to 属性可以是字符串路径或 Location 对象。 to 属性要求安装 Vue 路由器（或等效项）。

<template>
  <b-list-group>
    <b-list-group-item>
      <b-avatar href="#foo" variant="primary" text="FF" class="align-baseline"></b-avatar>
      Link Text Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar href="#bar" src="https://placekitten.com/300/300"></b-avatar>
      Link Image Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar href="#baz" icon="star-fill" class="align-center"></b-avatar>
      Link Icon Avatar
    </b-list-group-item>
  </b-list-group>
</template>

<!-- b-avatar-href.vue -->

注意

button 属性优先于 href 和 to 属性。
有关 <router-link> 兼容属性的其他详细信息，请参阅路由器支持参考部分。

徽章头像

2.12.0+

通过 badge 属性或 'badge' 插槽轻松地向头像添加徽章，并且可以通过 badge-variant 属性设置徽章变体。徽章会随着头像大小缩放。

<template>
  <div>
    <b-avatar badge></b-avatar>
    <b-avatar badge badge-variant="danger" src="https://placekitten.com/300/300"></b-avatar>
    <b-avatar badge badge-variant="warning" icon="people-fill"></b-avatar>
    <b-avatar badge badge-variant="success" src="https://placekitten.com/300/300"></b-avatar>
    <b-avatar badge badge-variant="dark" text="BV"></b-avatar>
    <b-avatar square badge badge-variant="dark" text="BV"></b-avatar>
  </div>
</template>

<!-- b-avatar-badge.vue -->

徽章内容

通过向 badge 属性提供字符串或使用命名插槽 'badge' 向徽章添加文本内容。

<template>
  <div>
    <b-avatar badge="BV"></b-avatar>
    <b-avatar badge="7" variant="primary" badge-variant="dark"></b-avatar>
    <b-avatar badge-variant="info" src="https://placekitten.com/300/300">
      <template #badge><b-icon icon="star-fill"></b-icon></template>
    </b-avatar>
  </div>
</template>

<!-- b-avatar-badge-content.vue -->

徽章定位

默认情况下，徽章出现在头像的右下角。你可以使用 badge-top 和 badge-right 布尔属性切换侧面。组合这两个属性可将徽章移动到头像的右上角。

<template>
  <div>
    <b-avatar badge></b-avatar>
    <b-avatar badge badge-left></b-avatar>
    <b-avatar badge badge-top></b-avatar>
    <b-avatar badge badge-left badge-top></b-avatar>
  </div>
</template>

<!-- b-avatar-badge-position.vue -->

使用 badge-offset 属性来控制徽章的偏移量。 badge-offset 必须是一个有效的 CSS 长度字符串（即 '2px'、'-2px'、'0.5em' 等）。正值会向内移动徽章，而负值会向外移动徽章。

<template>
  <div>
    <b-avatar badge></b-avatar>
    <b-avatar badge badge-offset="-0.5em"></b-avatar>
    <b-avatar badge badge-offset="-2px"></b-avatar>
    <b-avatar badge badge-offset="2px"></b-avatar>
    <b-avatar badge badge-top></b-avatar>
    <b-avatar badge badge-top badge-offset="-0.5em"></b-avatar>
    <b-avatar badge badge-top badge-offset="-2px"></b-avatar>
    <b-avatar badge badge-top badge-offset="2px"></b-avatar>
  </div>
</template>

<!-- b-avatar-badge-offset.vue -->

头像组

v2.14.0+

将多个头像组合在一起，方法是将它们包装在 <b-avatar-group> 组件中

<template>
  <div>
    <b-avatar-group size="60px">
      <b-avatar></b-avatar>
      <b-avatar text="BV" variant="primary"></b-avatar>
      <b-avatar src="https://placekitten.com/300/300" variant="info"></b-avatar>
      <b-avatar text="OK" variant="danger"></b-avatar>
      <b-avatar variant="warning"></b-avatar>
      <b-avatar src="https://placekitten.com/320/320" variant="dark"></b-avatar>
      <b-avatar icon="music-note" variant="success"></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group.vue -->

注意

variant、square 和 rounded 属性在 <b-avatar-group> 上将优先于各个头像上的相应属性。

组大小

要调整头像大小，请在 <b-avatar-group> 上使用属性 size。 size 属性接受与 <b-avatar> 上的 size 属性相同类型的数值。请注意，当将 size 属性放在 <b-avatar-group> 中时，单个头像上的 size 属性将被忽略。

<template>
  <div>
    <b-avatar-group size="5rem">
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-size.vue -->

组变体

使用 variant 属性为 <b-avatar-group> 中的所有子头像着色。请注意，当设置 variant 属性时，它将覆盖各个头像上指定的 variant。

<template>
  <div>
    <b-avatar-group variant="success">
      <b-avatar></b-avatar>
      <b-avatar variant="info"></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-variant.vue -->

组舍入

与 variant 属性类似，<b-avatar-group> 属性 square 和 rounded 优先于各个子头像上的相应属性。

<template>
  <div>
    <b-avatar-group rounded="lg">
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-rounded.vue -->

组重叠

默认情况下，<b-avatar-group> 中的子头像将重叠 0.3 倍（相对于头像的大小）。你可以通过将 overlap 属性设置为 0 到 1 之间的值来控制重叠量，其中 0 表示不重叠，1 表示 100% 重叠。

<template>
  <div>
    <b-avatar-group overlap="0.65">
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-overlap.vue -->

无障碍

使用 aria-label 属性为你的头像提供一个无障碍的、屏幕阅读器友好的标签。如果你有一个徽章，建议在你的 aria-label 中添加有关徽章目的或内容的信息（例如 '3 条消息'、'在线' 等）。

虽然 click 事件会发出，无论 button、href 还是 to 属性是否设置，但强烈建议在点击事件应该触发操作（或在更改路由或更改 URL 时使用 to 或 href 属性）时使用 button 属性，以实现无障碍性。

实现说明

头像基于 <b-badge> 和 <b-button> 组件，因此依赖于 Bootstrap 的 badge-* 和 btn-* 变体类，以及 rounded-* 实用程序类。

<b-avatar> 还需要 BootstrapVue 的自定义 CSS 才能正确设置样式。

组件参考

`<b-avatar>`

v2.8.0+

查看源代码

<b-avatar> 属性
<b-avatar> 插槽
<b-avatar> 事件

属性

所有属性默认值都全局可配置。

属性 (点击按升序排列)	类型 (点击按升序排列)	默认值	说明
`active-class`	`字符串`		<router-link> 属性：配置链接处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
`alt` v2.9.0+	`字符串`	`'avatar'`	要放置在图像和图标头像的“alt”属性中的值
`append`	`布尔值`	`false`	<router-link> 属性：设置 append 属性始终将相对路径附加到当前路径
`aria-label`	`字符串`		设置呈现元素上 `aria-label` 属性的值
`badge` v2.12.0+	`Boolean` 或 `String`	`false`	当为 `true` 时，在头像上显示一个空徽章，或者将其设置为字符串以显示徽章中的内容
`badge-left` v2.12.0+	`布尔值`	`false`	当为 `true` 时，将徽章放在左侧而不是右侧
`badge-offset` v2.12.0+	`字符串`		CSS 长度，用于偏移徽章。正值将徽章向内移动，而负值将徽章向外移动
`badge-top` v2.12.0+	`布尔值`	`false`	当为 `true` 时，将徽章放在顶部而不是底部
`badge-variant` v2.12.0+	`字符串`	`'primary'`	将 Bootstrap 主题颜色变体之一应用于徽章
`button`	`布尔值`	`false`	当设置为 `true` 时，将头像呈现为按钮
`button-type`	`字符串`	`'button'`	要呈现的按钮类型（即 `button`、`submit`、`reset`）。如果未设置 prop button，则不起作用
`禁用`	`布尔值`	`false`	设为 `true` 时，禁用组件的功能并使其处于禁用状态
`精确`	`布尔值`	`false`	<router-link> 属性：默认激活类匹配行为是包含匹配。设置此属性会强制模式与路由完全匹配
`精确激活类`	`字符串`		<router-link> 属性：配置在链接使用精确匹配激活时应用的激活 CSS 类。通常，您会希望将其设置为类名“active”
`精确路径`	`布尔值`	`false`	<router-link> 属性：允许仅使用 URL 的路径部分进行匹配，有效地忽略查询和哈希部分
`精确路径激活类`	`字符串`		<router-link> 属性：配置在链接使用精确路径匹配激活时应用的激活 CSS 类。通常，您会希望将其设置为类名“active”
`href`	`字符串`		<b-link> 属性：表示标准 a 链接的目标 URL
`图标`	`字符串`		用于头像的图标名称。必须全部小写。如果未提供 `text` 或 `src` 属性，则默认为 `person-fill`
`不预取`	`布尔值`	`false`	<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分的页面。设置 `no-prefetch` 将禁用特定链接的此功能
`预取` v2.15.0+	`布尔值`	`空`	<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分的页面。将 `prefetch` 设置为 `true` 或 `false` 将覆盖 `router.prefetchLinks` 的默认值
`rel`	`字符串`	`空`	<b-link> 属性：在呈现的链接上设置 `rel` 属性
`替换`	`布尔值`	`false`	<router-link> 属性：设置 replace 属性将在单击时调用 `router.replace()` 而不是 `router.push()`，因此导航不会留下历史记录
`圆角`	`Boolean` 或 `String`	`false`	指定要应用于头像的圆角类型。`square` 属性优先。有关详细信息，请参阅文档
`路由组件名称` v2.15.0+	`字符串`		<b-link> 属性：BootstrapVue 会自动检测 `<router-link>` 和 `<nuxt-link>`。在您希望使用基于 `<router-link>` 的第三方链接组件的情况下，将此属性设置为组件名称。例如，如果您使用 Gridsome，则将其设置为“g-link”（注意仅将 `<router-link>` 特定的属性传递给组件）
`大小`	`数字`或`字符串`		头像大小。详情请参阅文档
`正方形`	`布尔值`	`false`	禁用头像的圆角，用方形角渲染头像
`src`	`字符串`		用于头像的图像 URL
`目标`	`字符串`	`'_self'`	<b-link> prop：设置渲染链接的 `target` 属性
`文本`	`字符串`		要放置在头像中的文本
`至`	`对象`或`字符串`		<router-link> prop：表示链接的目标路由。单击时，to prop 的值将内部传递给 `router.push()`，因此该值可以是字符串或位置描述符对象
`变体`	`字符串`	`'secondary'`	将 Bootstrap 主题颜色变体之一应用于组件

<b-avatar>支持生成<router-link>或<nuxt-link>组件（如果使用 Nuxt.js）。有关路由链接（或 nuxt 链接）特定 prop 的更多详细信息，请参阅路由支持参考部分。

插槽

名称	说明
`徽章` v2.12.0+	要放置在头像可选徽章中的内容。覆盖 `badge` prop
`默认`	要放置在头像中的内容。覆盖 prop `text`、`src` 和 `icon-name`

事件

事件	参数	说明
`单击`	`事件` - 原生事件对象	当头像作为按钮或链接渲染时单击头像时触发。否则不触发
`img-error` v2.11.0+	`事件` - 原生事件对象	如果提供了图像 `src` 且图像加载失败，则触发

`<b-avatar-group>`

v2.14.0+

查看源代码

<b-avatar-group> 属性
<b-avatar-group> 插槽

属性

所有属性默认值都全局可配置。

属性	类型	默认值	说明
`overlap`	`数字`或`字符串`	`0.3`	浮点数，指定重叠量，其中 `0` 表示无重叠，`1` 表示 100% 重叠
`圆角`	`Boolean` 或 `String`	`false`	指定应用于子头像的舍入类型。`square` 属性优先。有关详细信息，请参阅文档
`大小`	`字符串`		所有子头像的大小。有关详细信息，请参阅文档
`正方形`	`布尔值`	`false`	禁用子头像的舍入，使每个头像都呈现方形角
`tag`	`字符串`	`'div'`	指定要呈现的 HTML 标签，而不是默认标签
`变体`	`字符串`		将 Bootstrap 主题颜色变体之一应用于所有子头像

插槽

名称	说明
`默认`	要放置在头像组中的内容（头像）

导入单个组件

你可以通过以下命名导出将单个组件导入到你的项目中

组件	命名导出	导入路径
`<b-avatar>`	`BAvatar`	`bootstrap-vue`
`<b-avatar-group>`	`BAvatarGroup`	`bootstrap-vue`

示例

import { BAvatar } from 'bootstrap-vue'
Vue.component('b-avatar', BAvatar)

作为 Vue.js 插件导入

此插件包含上述所有列出的单个组件。插件还包括任何组件别名。

命名导出	导入路径
`AvatarPlugin`	`bootstrap-vue`

示例

import { AvatarPlugin } from 'bootstrap-vue'
Vue.use(AvatarPlugin)