BootstrapVue中文文档

BootstrapVue Avatar 显示 文字、图像、图标

BootstrapVue Avatar 支持文字、图像、图标还有自定义类型。

例子

图片内容

<b-avatar variant="warning" src="https://www.itxst.com/img/logo.png">
</b-avatar>

图标内容

<template>
  <div> 
    <b-avatar icon="music-note"></b-avatar>
    <b-avatar icon="people-fill"></b-avatar>
    <b-avatar icon="star-fill"></b-avatar>
    <b-avatar icon="people-fill" size="50px"></b-avatar>
  </div>
 </template>

文字内容

<template>
  <div>
    <b-avatar text="A"></b-avatar>
    <b-avatar text="B"></b-avatar>
    <b-avatar text="C"></b-avatar>
    <b-avatar text="D" size="60px"></b-avatar>
  </div>
 </template>

自定义内容

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

完整代码

<template>
  <div id="app">
    <b-avatar variant="warning" src="https://www.itxst.com/img/logo.png"></b-avatar>
    <b-avatar variant="secondary" icon="music-note"></b-avatar>
    <b-avatar variant="dark" icon="people-fill"></b-avatar>
    <b-avatar variant="danger" icon="star-fill"></b-avatar>
    <b-avatar variant="info" icon="people-fill" size="50px"></b-avatar>
    <b-avatar variant="success" ext="A"></b-avatar>
    <b-avatar variant="primary" text="B"></b-avatar>
    <b-avatar variant="warning" text="C"></b-avatar>
    <b-avatar variant="danger" text="D" size="60px"></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: {  
  },
};
</script>
Catalog
快速入门 Alerts 警告框 Aspect 设置宽高比 Avatar 头像 Avatar 属性事件 Avatar 显示内容 Avatar 头像样式 Avatar 头像类型按 Avatar Badge 徽章 Avatar Groups 分组 Badge 徽章 Breadcrumb 面包屑 Button 按钮 Button 按钮基础 Button 属性列表 Button Group 按钮组 Button Toolbar 工具栏 Calendar 日历 Calendar 选择事件 Calendar 日历组件 Calendar 组件样式 Calendar 设置语言