• Alert 警告提示
    • 何时使用
    • 代码演示
      • 顶部公告
      • 基本
      • 可关闭的警告提示
      • 自定义关闭
      • 含有辅助性文字介绍
      • 图标
      • 四种样式
      • 平滑地卸载
  • API
    • 事件

    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