Alert 警告提示

概述

静态地呈现一些警告信息,可手动关闭。

代码示例

Alert 警告提示 - 图1

基础用法

基本使用方法,有四种样式可以选择infosuccesswarningerror

  1. <template>
  2. <Alert>An info prompt</Alert>
  3. <Alert type="success">A success prompt</Alert>
  4. <Alert type="warning">A warning prompt</Alert>
  5. <Alert type="error">An error prompt</Alert>
  6. </template>
  7. <script>
  8. export default {
  9. }
  10. </script>

Alert 警告提示 - 图2

含描述信息

自定义<slot name="desc">描述内容。

  1. <template>
  2. <Alert>
  3. An info prompt
  4. <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
  5. </Alert>
  6. <Alert type="success">
  7. A success prompt
  8. <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
  9. </Alert>
  10. <Alert type="warning">
  11. A warning prompt
  12. <template slot="desc">
  13. Content of prompt. Content of prompt. Content of prompt.
  14. </template>
  15. </Alert>
  16. <Alert type="error">
  17. An error prompt
  18. <span slot="desc">
  19. Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
  20. </span>
  21. </Alert>
  22. </template>
  23. <script>
  24. export default {
  25. }
  26. </script>

Alert 警告提示 - 图3

图标

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

  1. <template>
  2. <Alert show-icon>An info prompt</Alert>
  3. <Alert type="success" show-icon>A success prompt</Alert>
  4. <Alert type="warning" show-icon>A warning prompt</Alert>
  5. <Alert type="error" show-icon>An error prompt</Alert>
  6. <Alert show-icon>
  7. An info prompt
  8. <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
  9. </Alert>
  10. <Alert type="success" show-icon>
  11. A success prompt
  12. <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
  13. </Alert>
  14. <Alert type="warning" show-icon>
  15. A warning prompt
  16. <template slot="desc">
  17. Content of prompt. Content of prompt. Content of prompt.
  18. </template>
  19. </Alert>
  20. <Alert type="error" show-icon>
  21. An error prompt
  22. <span slot="desc">
  23. Custom error description copywriting.
  24. </span>
  25. </Alert>
  26. <Alert show-icon>
  27. Custom icon
  28. <Icon type="ios-bulb-outline" slot="icon"></Icon>
  29. <template slot="desc">Custom icon copywriting. Custom icon copywriting. Custom icon copywriting. </template>
  30. </Alert>
  31. </template>
  32. <script>
  33. export default {
  34. }
  35. </script>

Alert 警告提示 - 图4

可关闭

显示关闭按钮,点击可关闭提示,也可以自定义关闭 slot 。

  1. <template>
  2. <Alert closable>An info prompt</Alert>
  3. <Alert type="success" show-icon closable>
  4. A success prompt
  5. <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
  6. </Alert>
  7. <Alert type="warning" closable>
  8. Custom closing content
  9. <span slot="close">No longer prompt</span>
  10. </Alert>
  11. </template>
  12. <script>
  13. export default {
  14. }
  15. </script>

Alert 警告提示 - 图5

顶部公告

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

  1. <template>
  2. <Alert banner type="warning">Notice: notification contents...</Alert>
  3. <Alert banner closable type="warning">Notice: notification contents...</Alert>
  4. </template>
  5. <script>
  6. export default {
  7. }
  8. </script>

API

Alert props

属性 说明 类型 默认值
type 警告提示样式,可选值为infosuccesswarningerror String info
closable 是否可关闭 Boolean false
show-icon 是否显示图标 Boolean false

Alert events

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

Alert slot

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