BootstrapVue Avatar 头像介绍

BootstrapVue Avatar头像组件,Avatar头像组件可显示图片,图标或短文本,还可以作为按钮、链接、vue路由链接使用。

Avatar效果

例子

简单使用

<b-avatar variant="primary" text="BTN" button @click="onBtn('按钮类型')"></b-avatar>
<b-avatar variant="success" icon="people-fill"></b-avatar>
<b-avatar variant="secondary"></b-avatar>
<b-avatar variant="dark" badge="86" badge-left badge-top></b-avatar>
<b-avatar variant="warning" src="https://www.itxst.com/img/logo.png" href="https://www.itxst.com/"></b-avatar>

Avatar属性

属性名称类型说明
srcString图片方式头像图片url
textString文字方式头像显示的文字
iconString图标方式时头像的图标名称
altString默认值avatar,图片模式时图片的alt属性
variantString默认值secondary,Bootstrap 主题的color颜色
sizeNumber or Stringavatar大小,数字或者百分比默认null
squareBoolean默认值false,是否显示正方形
roundedBoolean or String默认值false,是否显示圆角
buttonBoolean默认值false,将组件显示为按钮
button-typeString按钮类型 button、submit、reset,默认button
badgeBoolean or String徽章
badge-variantStringBootstrap 主题的color颜色
badge-topBoolean将徽章显示在组件的顶部
badge-leftBoolean将徽章显示在组件的左边
badge-offsetString徽章的偏移量,如badge-offset="10px"
hrefString将组件渲染为链接,如href="http://www.itxst.com"
relString将组件渲染为链接时 a标签的rel属性
targetString将组件渲染为链接时 a标签的target属性
disabledBoolean是否禁用,默认为false
toString or Objectvue路由相关,<router-link> 的to属性
appendBooleanvue路由相关,<router-link> 的append属性
replaceBooleanvue路由相关,<router-link> 的replace属性
active-classStringvue路由相关,当前路径的样式
no-prefetchBoolean<nuxt-link> prop: To improve the responsiveness
of your Nuxt.js applications, when the link will be displayed
within the viewport, Nuxt.js will automatically prefetch
the code splitted page. Setting 'no-prefetch' will disabled
this feature for the specific link
router-component-nameString<b-link> prop: BootstrapVue auto detects between
`<router-link>` and `<nuxt-link>`. In cases where you
want to use a 3rd party link component based on
`<router-link>`, set this prop to the component name
. e.g. set it to 'g-link' if you are using Gridsome
(note only `<router-link>` specific props are passed to
the component)
aria-labelString无障碍阅读的内容

Avatar插槽

插槽名称
说明
default插槽覆盖 `text`, `src`, and `icon-name`内容
badgebadge插槽,支持v2.12.0+

<b-avatar>
     <slot name="default">内容</slot>
     <slot name="badge">b</slot>
</b-avatar>

Avatar事件

事件名称
说明
click点击事件,针对button、链接类型有效
img-error图片加载异常事件,支持v2.12.0+
<template>
  <div id="app">
      <b-avatar @click="onclick" button></b-avatar> 
      <b-avatar @img-error="error" src="http://www.baidu.com/img/logo.png"></b-avatar>
  </div>
</template>
<script>
//导入vue和BootstrapVue
import Vue from "vue";
import { BootstrapVue } from "bootstrap-vue";
//注册BootstrapVue组件
Vue.component("BootstrapVue", BootstrapVue);
export default {
  name: "App",
  data() {
    return { 
    };
  }, 
  methods: { 
    onclick(evt){     
     this.$bvToast.toast(evt, {
          title: 'click事件', 
          variant:'danger',
          toaster: 'b-toaster-top-center',
          autoHideDelay: 5000
        })
    },
    error(evt){     
     this.$bvToast.toast(evt, {
          title: 'img-error事件', 
          variant:'danger',
          toaster: 'b-toaster-top-center',
          autoHideDelay: 5000
        })
    }
  },
};
</script>