• 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

    四种样式

    共有四种样式 success、info、warning、error。

    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自定义图标，showIcon 为 true 时有效vnode | slot-
    message警告提示内容string|slot无
    showIcon是否显示辅助图标booleanfalse，banner 模式下默认值为 true
    type指定警告提示的样式，有四种选择 success、info、warning、errorstringinfo，banner 模式下默认值为 warning

    事件

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