Alert 警告

用于在页面提示重要信息

基础用法

在页面显示提示，不会凭空消失

这是成功提示

这是信息提示

这是警告提示

这是错误提示

<Alert type={'success'} title={'这是成功提示'} />
<Alert type={'info'} title={'这是信息提示'} />
<Alert type={'warning'} title={'这是警告提示'} />
<Alert type={'error'} title={'这是错误提示'} />

<Alert type={'success'} title={'这是成功提示'} />
<Alert type={'info'} title={'这是信息提示'} />
<Alert type={'warning'} title={'这是警告提示'} />
<Alert type={'error'} title={'这是错误提示'} />

自定义关闭按钮

可以自定义显示关闭按钮

这是成功提示

这是信息提示

知道了

<Alert type={'success'} title={'这是成功提示'} closable={true} />
<Alert
  type={'info'}
  title={'这是信息提示'}
  closable={true}
  closeText={'知道了'}
/>

<Alert type={'success'} title={'这是成功提示'} closable={true} />
<Alert
  type={'info'}
  title={'这是信息提示'}
  closable={true}
  closeText={'知道了'}
/>

自定义图标

可以自定义显示图标

这是成功提示

这是信息提示

这是成功提示

这是信息提示

<Alert type={'success'} title={'这是成功提示'} showIcon={true} />
<Alert type={'info'} title={'这是信息提示'} showIcon={true} />
<Alert type={'warning'} title={'这是成功提示'} showIcon={true} />
<Alert type={'error'} title={'这是信息提示'} showIcon={true} />

<Alert type={'success'} title={'这是成功提示'} showIcon={true} />
<Alert type={'info'} title={'这是信息提示'} showIcon={true} />
<Alert type={'warning'} title={'这是成功提示'} showIcon={true} />
<Alert type={'error'} title={'这是信息提示'} showIcon={true} />

自定义描述

可以在主要内容下自定义添加描述内容

这是成功提示

成功提示在这里

<Alert
  type={'success'}
  title={'这是成功提示'}
  showIcon={true}
  description={'成功提示在这里'}
/>

<Alert
  type={'success'}
  title={'这是成功提示'}
  showIcon={true}
  description={'成功提示在这里'}
/>

携带图标和描述内容

这是成功提示

携带图标和描述内容

这是信息提示

携带图标和描述内容

这是成功提示

携带图标和描述内容

这是信息提示

携带图标和描述内容

<Alert
  type={'success'}
  title={'这是成功提示'}
  showIcon={true}
  description={'携带图标和描述内容'}
  closable={true}
/>
<Alert
  type={'info'}
  title={'这是信息提示'}
  showIcon={true}
  description={'携带图标和描述内容'}
  closable={true}
/>
<Alert
  type={'warning'}
  title={'这是成功提示'}
  showIcon={true}
  description={'携带图标和描述内容'}
/>
<Alert
  type={'error'}
  title={'这是信息提示'}
  showIcon={true}
  description={'携带图标和描述内容'}
/>

<Alert
  type={'success'}
  title={'这是成功提示'}
  showIcon={true}
  description={'携带图标和描述内容'}
  closable={true}
/>
<Alert
  type={'info'}
  title={'这是信息提示'}
  showIcon={true}
  description={'携带图标和描述内容'}
  closable={true}
/>
<Alert
  type={'warning'}
  title={'这是成功提示'}
  showIcon={true}
  description={'携带图标和描述内容'}
/>
<Alert
  type={'error'}
  title={'这是信息提示'}
  showIcon={true}
  description={'携带图标和描述内容'}
/>

属性

属性名	名称	类型	默认值
title	提示标题	String	-
type	类型	String	'info'
description	描述	String	-
closable	显示关闭按钮	Boolean	false
closeText	关闭按钮文本	String	-
showIcon	是否显示图标	Boolean	false

事件

属性	名称	回调参数
onClose	关闭事件	-

Alert 警告

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}基础用法

自定义关闭按钮

自定义图标

自定义描述

携带图标和描述内容

属性

事件

基础用法