警告提示 Alert ​

用于向用户展示警告提示以及其他重要信息

基础用法 ​

基础的警告提示使用方式。

<template>
  <bp-alert type="error">这是一条错误提示</bp-alert>
</template>

提示类型 ​

提供 4 种不同类型以供不同场景使用，分别是info - 提示，success - 成功，warning - 警告，error - 错误。

<template>
  <bp-space type="horizontal">
    <bp-row :gutter="10">
      <bp-col span="12">
        <bp-alert type="info">这是一条提示信息</bp-alert>
      </bp-col>
      <bp-col span="12">
        <bp-alert type="success">这是一条成功提示</bp-alert>
      </bp-col>
    </bp-row>
    <bp-row :gutter="10">
      <bp-col span="12">
        <bp-alert type="warning">这是一条警告提示</bp-alert>
      </bp-col>
      <bp-col span="12">
        <bp-alert type="error">这是一条错误提示</bp-alert>
      </bp-col>
    </bp-row>
  </bp-space>
</template>

提示标题 ​

可以通过 title 属性设置提示信息的标题。

<template>
  <bp-row :gutter="10">
    <bp-col span="12">
      <bp-alert type="info" title="提示">这是一条提示信息</bp-alert>
    </bp-col>
    <bp-col span="12">
      <bp-alert type="success" title="操作成功">这是一条成功提示</bp-alert>
    </bp-col>
  </bp-row>
</template>

可关闭 ​

可通过 closeable 属性控制是否支持手动关闭选项。

<template>
  <bp-alert type="info" closeable>这是一条提示信息</bp-alert>
</template>

Alert 属性 ​

type
提示类型
Enum
info
clearable
是否允许关闭
Boolean
false
title
提示标题
String
-

Alert 事件 ​

close
点击关闭触发
none