Alert 提示
用于页面中展示重要的提示信息。
基础用法
Alert 组件不属于浮层元素，不会自动消失或关闭。
Alert 组件提供5种类型，由 type 属性指定，默认值为 info。 primary 已被添加到2.9.11。
export function AlertBasic() { return ( <div style={box}> <ElAlert title="Primary alert" type="primary" /> <ElAlert title="Success alert" type="success" style={gap} /> <ElAlert title="Info alert" type="info" style={gap} /> <ElAlert title="Warning alert" type="warning" style={gap} /> <ElAlert title="Error alert" type="error" style={gap} /> </div> );}
主题
Alert 组件提供了两个不同的主题：light 和 dark。
通过设置 effect 属性来改变主题，默认为 light。
export function AlertTheme() { return ( <div style={box}> <ElAlert title="Primary alert" type="primary" effect="dark" /> <ElAlert title="Success alert" type="success" effect="dark" style={gap} /> <ElAlert title="Info alert" type="info" effect="dark" style={gap} /> <ElAlert title="Warning alert" type="warning" effect="dark" style={gap} /> <ElAlert title="Error alert" type="error" effect="dark" style={gap} /> </div> );}
自定义关闭按钮
你可以自定义关闭按钮为文字或其他符号。
你可以设置 Alert 组件是否为可关闭状态，关闭按钮的内容以及关闭时的回调函数同样可以定制。 closable 属性决定 Alert 组件是否可关闭，该属性接受一个 Boolean，默认为 false。你可以设置 close-text 属性来代替右侧的关闭图标，需要注意的是 close-text 必须是一个字符串。当 Alert 组件被关闭时会触发 close 事件。
Customized close textGotcha
export function AlertCustomClose() { return ( <div style={box}> <ElAlert title="Unclosable alert" type="success" closable={false} /> <ElAlert title="Customized close text" type="info" closeText="Gotcha" style={gap} /> <ElAlert title="Alert with callback" type="warning" style={gap} /> </div> );}
使用图标
你可以通过为 Alert 组件添加图标来提高可读性。
通过设置 show-icon 属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。或者你可以使用 icon slot 自定义 icon 内容。
Error alert with custom icon export function AlertIcon() { return ( <div style={box}> <ElAlert title="Primary alert" type="primary" showIcon /> <ElAlert title="Success alert" type="success" showIcon style={gap} /> <ElAlert title="Info alert" type="info" showIcon style={gap} /> <ElAlert title="Warning alert" type="warning" showIcon style={gap} /> <ElAlert title="Error alert" type="error" showIcon style={gap} /> <ElAlert title="Error alert with custom icon" type="error" showIcon icon={<Bell />} style={gap} /> </div> );}
文字居中
使用 center 属性来让文字水平居中。
export function AlertCenter() { return ( <div style={box}> <ElAlert title="Primary alert" type="primary" center showIcon /> <ElAlert title="Success alert" type="success" center showIcon style={gap} /> <ElAlert title="Info alert" type="info" center showIcon style={gap} /> <ElAlert title="Warning alert" type="warning" center showIcon style={gap} /> <ElAlert title="Error alert" type="error" center showIcon style={gap} /> </div> );}
文字描述
为 Alert 组件添加一个更加详细的描述来使用户了解更多信息。
除了必填的 title 属性外，你可以设置 description 属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放文本内容，当内容超出长度限制时会自动换行显示。
With descriptionThis is a description.
export function AlertDescription() { return ( <div style={box}> <ElAlert title="With description" type="success" description="This is a description." /> </div> );}
带图标和描述
Primary alertMore text description
Success alertMore text description
Info alertMore text description
Warning alertMore text description
Error alertMore text description
export function AlertIconDescription() { return ( <div style={box}> <ElAlert title="Primary alert" type="primary" description="More text description" showIcon /> <ElAlert title="Success alert" type="success" description="More text description" showIcon style={gap} /> <ElAlert title="Info alert" type="info" description="More text description" showIcon style={gap} /> <ElAlert title="Warning alert" type="warning" description="More text description" showIcon style={gap} /> <ElAlert title="Error alert" type="error" description="More text description" showIcon style={gap} /> </div> );}
Alert API
属性
| 名称 | 说明 | 类型 | 默认值 |
|---|
| title | Alert 标题。 | string | — |
| type | Alert 类型。 | enum | info |
| description | 描述性文本 | string | — |
| closable | 是否可以关闭 | boolean | true |
| center | 文字是否居中 | boolean | false |
| close-text | 自定义关闭按钮文本 | string | — |
| show-icon | 是否显示类型图标 | boolean | false |
| effect | 主题样式 | enum | light |
Events
| 名称 | 描述 | 类型 |
|---|
| close | 关闭 Alert 时触发的事件 | Function |
Slots
| 名称 | 描述 |
|---|
| default | Alert 内容描述 |
| title | 标题的内容 |
| icon 2.9.7 | icon 的内容 |
