Notification 通知提醒框

全局展示通知提醒信息。

何时使用

在系统四个角显示通知提醒信息。经常用于以下情况：

• 较为复杂的通知内容。
• 带有交互的通知，给出用户下一步的行动点。
• 系统主动推送。

代码演示

基本

最简单的用法，4.5 秒后自动关闭。

<template>
    <button type="button" class="ant-btn ant-btn-primary" @click="openNotification">
        <span>打开通知提醒框</span>
    </button>
</template>
<script>
    export default {
        methods: {
            openNotification() {
                this.$notification.open({
                  message: '这是标题',
                  description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案',
                  onClose: close
                });
            }
        }
    }
</script>

自动关闭的延时

自定义通知框自动关闭的延时，默认4.5s，取消自动关闭只要将该值设为 0 即可。可通过this.$notification.close(selfKey) 手动关闭通知框

<template>
    <button type="button" class="ant-btn ant-btn-primary" @click="openNotificationInfinite">
        <span>打开通知提醒框</span>
    </button>
    <button type="button" class="ant-btn ant-btn-primary" @click="closeNotice">
        <span>关闭通知提醒框</span>
    </button>
</template>
<script>
    export default {
        methods: {
            openNotificationInfinite() {
                this.$notification.info({
                    message: '这是标题',
                    description: '我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭',
                    duration: 0,
                    selfKey:'noClose'
                });
            },
            closeNotice(){
                this.$notification.close('noClose');
            }
        }
    }
</script>

带有Icon的通知提醒框

通知提醒框左侧有图标。

<template>
    <button type="button" class="ant-btn" @click="openNotificationWithIcon('success')"><span>成 功</span></button>
    <button type="button" class="ant-btn" @click="openNotificationWithIcon('info')"><span>消 息</span></button>
    <button type="button" class="ant-btn" @click="openNotificationWithIcon('warning')"><span>警 告</span></button>
    <button type="button" class="ant-btn" @click="openNotificationWithIcon('error')"><span>错 误</span></button>
</template>
<script>
    export default {
        methods: {
            openNotificationWithIcon(type) {
                this.$notification[type]({
                  message: '这是标题',
                  description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案'
                });
            }
        }
    }
</script>

位置

可以设置通知从右上角、右下角、左下角、左上角弹出。

<template>
    <v-select style="width: 120px;" :data="options" @change="onPlacementChange"></v-select>
    <button type="button" class="ant-btn ant-btn-primary" @click="openNotification">
        <span>打开通知提醒框</span>
    </button>
</template>
<script>
    const options = [{
        value: 'topLeft',
        label: 'topLeft'
    }, {
        value: 'topRight',
        label: 'topRight'
    }, {
        value: 'bottomLeft',
        label: 'bottomLeft'
    }, {
        value: 'bottomRight',
        label: 'bottomRight'
    }];
    export default {
        data () {
            return {
                options
            }
        },
        methods: {
            openNotification() {
                this.$notification.info({
                  message: '这是标题',
                  description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案',
                  onClose: close
                });
            },
            onPlacementChange(val) {
                this.$notification.config({
                    placement: val,
                });
            },
        }
    }
</script>

API

• this.$notification.success(config)
• this.$notification.error(config)
• this.$notification.info(config)
• this.$notification.warning(config)
• this.$notification.close(selfKey:String)

config 参数如下：

还提供了一个全局配置方法，在调用前提前配置，全局一次生效。

• this.$notification.config(options)

    this.$notification.config({
        top: 100,
        duration: 3,
    });

options 参数如下：