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属性

属性名称	类型	说明
src	String	图片方式头像图片url
text	String	文字方式头像显示的文字
icon	String	图标方式时头像的图标名称
alt	String	默认值avatar，图片模式时图片的alt属性
variant	String	默认值secondary，Bootstrap 主题的color颜色
size	Number or String	avatar大小，数字或者百分比默认null
square	Boolean	默认值false,是否显示正方形
rounded	Boolean or String	默认值false，是否显示圆角
button	Boolean	默认值false，将组件显示为按钮
button-type	String	按钮类型 button、submit、reset，默认button
badge	Boolean or String	徽章
badge-variant	String	Bootstrap 主题的color颜色
badge-top	Boolean	将徽章显示在组件的顶部
badge-left	Boolean	将徽章显示在组件的左边
badge-offset	String	徽章的偏移量，如badge-offset="10px"
href	String	将组件渲染为链接，如href="http://www.itxst.com"
rel	String	将组件渲染为链接时 a标签的rel属性
target	String	将组件渲染为链接时 a标签的target属性
disabled	Boolean	是否禁用，默认为false
to	String or Object	vue路由相关，<router-link> 的to属性
append	Boolean	vue路由相关，<router-link> 的append属性
replace	Boolean	vue路由相关，<router-link> 的replace属性
active-class	String	vue路由相关，当前路径的样式
no-prefetch	Boolean	<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-name	String	<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-label	String	无障碍阅读的内容

Avatar插槽

插槽名称	说明
default	插槽覆盖 `text`, `src`, and `icon-name`内容
badge	badge插槽，支持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>