BootstrapVue Badge 徽章

Badge徽章基础用法

BootstrapVue Badge徽章可以用在标签、计数、需要重点提示的内容，文字大小和父元素大小一样。

例子

<template>
  <div>
  <h1>标题示列 <b-badge variant="primary">New</b-badge></h1>
  <h2>标题示列 <b-badge variant="secondary">New</b-badge></h2>
  <h3>标题示列 <b-badge variant="success">New</b-badge></h3>
  <h4>标题示列 <b-badge variant="danger">New</b-badge></h4>
  <h5>标题示列 <b-badge variant="warning">New</b-badge></h5>
  <h6>标题示列 <b-badge variant="info">New</b-badge></h6>
  </div>
</template>

Badge徽章融入其他组件

Badge徽章可以作为按钮或链接的一部分

例子

<b-button variant="primary">
   新的消息 <b-badge variant="light">4</b-badge>
</b-button>

variant属性设置主题变量

例子

<template>
  <div>
  <b-badge variant="primary">Primary</b-badge>
  <b-badge variant="secondary">Secondary</b-badge>
  <b-badge variant="success">Success</b-badge>
  <b-badge variant="danger">Danger</b-badge>
  <b-badge variant="dark">Dark</b-badge>
  <b-badge variant="light">Light</b-badge>
  <b-badge variant="warning">Warning</b-badge>
  <b-badge variant="info">Info</b-badge>
  </div>
</template>

Pill badge胶囊徽章

Pill badges胶囊徽章,有更圆润的角和更大的内间距

例子

<template>
  <div>
  <b-badge pill variant="primary">Primary</b-badge>
  <b-badge pill variant="secondary">Secondary</b-badge>
  <b-badge pill variant="success">Success</b-badge>
  <b-badge pill variant="danger">Danger</b-badge>
  <b-badge pill variant="dark">Dark</b-badge>
  <b-badge pill variant="light">Light</b-badge>
  <b-badge pill variant="warning">Warning</b-badge>
  <b-badge pill variant="info">Info</b-badge>
  </div>
</template>

Actionable badge可操作徽章

可以设置href、to属性将badge变成可操作徽章

例子

<template>
  <div>
  <b-badge href="#" variant="primary">Primary</b-badge>
  <b-badge href="http://www.itxst.com" variant="secondary">Secondary</b-badge>
  <b-badge href="http://www.itxst.com" target="_blank" variant="success">Success</b-badge>
  <b-badge to="router-link" variant="danger">Danger</b-badge>
  <b-badge to="router-link" target="_blank" variant="dark">Dark</b-badge>
  <b-badge to="router-link" :append="true" variant="light">Light</b-badge>
  <b-badge to="router-link" :replace="true" variant="warning">Warning</b-badge>
  <b-badge to="#" variant="info">Info</b-badge>
  </div>
</template>

属性列表

属性名称	类型	说明
tag	String	渲染后的标签默认span
variant	String	主题primary, success, warning, info, and danger
pill	Boolean	是否显示胶囊状默认false
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路由相关，当前路径的样式
exact	Boolean	<router-link> prop: The default active class matching behavior is inclusive match. Setting this prop forces the mode to exactly match the route
exact-active-class	String	<router-link> prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name 'active'
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 'prefetch' to 'true' or 'false' will overwrite the default value of 'router.prefetchLinks'
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	无障碍阅读的内容

单独导入Badge徽章组件

import { BBadge } from 'bootstrap-vue'
Vue.component('b-badge', BBadge)

Badge注册为Vue.js插件

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