警告提示 Alert

静态的展示一些区块，提示或者警告，可以动态的去删除

基础用法

直接用组件默认插槽插入即可

info alert

success alert

warning alert

error alert

<template>
  <div>
    <b-alert>info alert</b-alert>
    <b-alert type="success">success alert</b-alert>
    <b-alert type="warning">warning alert</b-alert>
    <b-alert type="error">error alert</b-alert>
  </div>
</template>

<template>
  <div>
    <b-alert>info alert</b-alert>
    <b-alert type="success">success alert</b-alert>
    <b-alert type="warning">warning alert</b-alert>
    <b-alert type="error">error alert</b-alert>
  </div>
</template>

包含描述信息

自定义#desc插入描述内容。

info alert 我是描述信息...

success alert 我是描述信息...

warning alert 我是描述信息...

error alert 我是描述信息...

<template>
  <div>
    <b-alert>
      info alert
      <template #desc>我是描述信息...</template>
    </b-alert>
    <b-alert type="success">
      success alert
      <template #desc>我是描述信息...</template>
    </b-alert>
    <b-alert type="warning">
      warning alert
      <template #desc>我是描述信息...</template>
    </b-alert>
    <b-alert type="error">
      error alert
      <template #desc>我是描述信息...</template>
    </b-alert>
  </div>
</template>

<template>
  <div>
    <b-alert>
      info alert
      <template #desc>我是描述信息...</template>
    </b-alert>
    <b-alert type="success">
      success alert
      <template #desc>我是描述信息...</template>
    </b-alert>
    <b-alert type="warning">
      warning alert
      <template #desc>我是描述信息...</template>
    </b-alert>
    <b-alert type="error">
      error alert
      <template #desc>我是描述信息...</template>
    </b-alert>
  </div>
</template>

图标

根据 type 属性自动添加不同图标，或者自定义图标 slot 。

info alert

success alert

warning alert

error alert Custom error description copywriting.

自定义icon 自定义icon描述

<template>
  <div>
    <b-alert show-icon>info alert</b-alert>
    <b-alert type="success" show-icon>success alert</b-alert>
    <b-alert type="warning" show-icon>warning alert</b-alert>
    <b-alert type="error" show-icon>
      error alert
      <template #desc>Custom error description copywriting.</template>
    </b-alert>
    <b-alert show-icon>
      自定义icon
      <template #icon>
        <b-icon name="smile"></b-icon>
      </template>
      <template #desc>自定义icon描述</template>
    </b-alert>
  </div>
</template>

<template>
  <div>
    <b-alert show-icon>info alert</b-alert>
    <b-alert type="success" show-icon>success alert</b-alert>
    <b-alert type="warning" show-icon>warning alert</b-alert>
    <b-alert type="error" show-icon>
      error alert
      <template #desc>Custom error description copywriting.</template>
    </b-alert>
    <b-alert show-icon>
      自定义icon
      <template #icon>
        <b-icon name="smile"></b-icon>
      </template>
      <template #desc>自定义icon描述</template>
    </b-alert>
  </div>
</template>

可以关闭

设置属性 closable 可以设置提示可关闭

An info prompt

A success prompt Content of prompt. Content of prompt. Content of prompt. Content of prompt.

Custom closing content No longer prompt

<template>
  <div>
    <b-alert closable>An info prompt</b-alert>
    <b-alert type="success" show-icon closable>
      A success prompt
      <template #desc>
        Content of prompt. Content of prompt. Content of prompt. Content of prompt.
      </template>
    </b-alert>
    <b-alert type="warning" closable>
      Custom closing content
      <template #close>No longer prompt</template>
    </b-alert>
  </div>
</template>

<template>
  <div>
    <b-alert closable>An info prompt</b-alert>
    <b-alert type="success" show-icon closable>
      A success prompt
      <template #desc>
        Content of prompt. Content of prompt. Content of prompt. Content of prompt.
      </template>
    </b-alert>
    <b-alert type="warning" closable>
      Custom closing content
      <template #close>No longer prompt</template>
    </b-alert>
  </div>
</template>

顶部公告样式

设置属性 banner 可以应用顶部公告的样式。

<template>
  <div>
    <b-alert banner>公告样式...</b-alert>
    <b-alert banner closable type="warning">公告样式...</b-alert>
  </div>
</template>

<template>
  <div>
    <b-alert banner>公告样式...</b-alert>
    <b-alert banner closable type="warning">公告样式...</b-alert>
  </div>
</template>

Props

参数	说明	类型	可选值	默认值
type	警告提示样式	String	info、success、warning、error	info
closable	是否可关闭	Boolean	—	false
show-icon	是否显示图标	Boolean	—	false

Events

事件名	说明	返回值
close	关闭时触发	event

Slot

名称	说明
default	警告提示内容
desc	警告提示辅助性文字介绍
icon	自定义图标内容
close	自定义关闭内容

警告提示 Alert ​

基础用法 ​

包含描述信息 ​

图标 ​

可以关闭 ​

顶部公告样式 ​

Props ​

Events ​

Slot ​