Alert 警告提示

警告提示,展现需要关注的信息。

何时使用

  • 当某个页面需要向用户显示警告的信息时。
  • 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。

代码演示

Alert 警告提示 - 图1

顶部公告

页面顶部通告形式,默认有图标且type 为 'warning'。

  1. <template>
  2. <div>
  3. <a-alert message="Warning text" banner />
  4. <br />
  5. <a-alert
  6. message="Very long warning text warning text text text text text text text"
  7. banner
  8. closable
  9. />
  10. <br />
  11. <a-alert :showIcon="false" message="Warning text without icon" banner />
  12. <br />
  13. <a-alert type="error" message="Error text" banner />
  14. </div>
  15. </template>

Alert 警告提示 - 图2

基本

最简单的用法,适用于简短的警告提示。

  1. <template>
  2. <a-alert message="Success Text" type="success" />
  3. </template>

Alert 警告提示 - 图3

可关闭的警告提示

显示关闭按钮,点击可关闭警告提示。

  1. <template>
  2. <div>
  3. <a-alert
  4. message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
  5. type="warning"
  6. closable
  7. @close="onClose"
  8. />
  9. <a-alert
  10. message="Error Text"
  11. description="Error Description Error Description Error Description Error Description Error Description Error Description"
  12. type="error"
  13. closable
  14. @close="onClose"
  15. />
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. methods: {
  21. onClose(e) {
  22. console.log(e, 'I was closed.');
  23. },
  24. },
  25. };
  26. </script>

Alert 警告提示 - 图4

自定义关闭

可以自定义关闭,自定义的文字会替换原先的关闭 Icon

  1. <template>
  2. <a-alert message="Info Text" type="info" closeText="Close Now" />
  3. </template>

Alert 警告提示 - 图5

含有辅助性文字介绍

含有辅助性文字介绍的警告提示。

  1. <template>
  2. <div>
  3. <a-alert message="Success Text" type="success">
  4. <p slot="description">
  5. Success Description <span style="color: red">Success</span> Description Success Description
  6. </p>
  7. </a-alert>
  8. <a-alert
  9. message="Info Text"
  10. description="Info Description Info Description Info Description Info Description"
  11. type="info"
  12. />
  13. <a-alert
  14. message="Warning Text"
  15. description="Warning Description Warning Description Warning Description Warning Description"
  16. type="warning"
  17. />
  18. <a-alert
  19. message="Error Text"
  20. description="Error Description Error Description Error Description Error Description"
  21. type="error"
  22. />
  23. </div>
  24. </template>

Alert 警告提示 - 图6

图标

可口的图标让信息类型更加醒目。

  1. <template>
  2. <div>
  3. <a-alert message="Success Tips" type="success" showIcon />
  4. <a-alert message="Informational Notes" type="info" showIcon />
  5. <a-alert message="Warning" type="warning" showIcon />
  6. <a-alert message="Error" type="error" showIcon />
  7. <a-alert
  8. message="Success Tips"
  9. description="Detailed description and advices about successful copywriting."
  10. type="success"
  11. showIcon
  12. />
  13. <a-alert
  14. message="Informational Notes"
  15. description="Additional description and informations about copywriting."
  16. type="info"
  17. showIcon
  18. />
  19. <a-alert
  20. message="Warning"
  21. description="This is a warning notice about copywriting."
  22. type="warning"
  23. showIcon
  24. />
  25. <a-alert
  26. message="Error"
  27. description="This is an error message about copywriting."
  28. type="error"
  29. showIcon
  30. />
  31. </div>
  32. </template>

Alert 警告提示 - 图7

四种样式

共有四种样式 successinfowarningerror

  1. <template>
  2. <div>
  3. <a-alert message="Success Text" type="success" />
  4. <a-alert message="Info Text" type="info" />
  5. <a-alert message="Warning Text" type="warning" />
  6. <a-alert message="Error Text" type="error" />
  7. </div>
  8. </template>

Alert 警告提示 - 图8

平滑地卸载

平滑、自然的卸载提示。

  1. <template>
  2. <div>
  3. <a-alert
  4. v-if="visible"
  5. message="Alert Message Text"
  6. type="success"
  7. closable
  8. :afterClose="handleClose"
  9. />
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. visible: true,
  17. };
  18. },
  19. methods: {
  20. handleClose() {
  21. this.visible = false;
  22. },
  23. },
  24. };
  25. </script>

API

参数说明类型默认值
afterClose关闭动画结束后触发的回调函数() => void-
banner是否用作顶部公告booleanfalse
closable默认不显示关闭按钮boolean
closeText自定义关闭按钮string|slot
description警告提示的辅助性文字介绍string|slot
icon自定义图标,showIcontrue 时有效vnode | slot-
message警告提示内容string|slot
showIcon是否显示辅助图标booleanfalse,banner 模式下默认值为 true
type指定警告提示的样式,有四种选择 successinfowarningerrorstringinfobanner 模式下默认值为 warning

事件

事件名称说明回调参数
close关闭时触发的回调函数(e: MouseEvent) => void