Notice 通知提醒

概述

在界面右上角显示可关闭的全局通知，常用于以下场景：

• 通知内容带有描述信息
• 系统主动推送

代码示例

基础用法

基本用法，默认在 4.5秒后关闭。如果 desc 参数为空或不填，则自动应用仅标题模式下的样式。

建议标题言简意赅，例如"删除成功"，更详细的内容可以放在描述信息里。

<template>
    <Button type="primary" @click="open(false)">Open notice</Button>
    <Button @click="open(true)">Open notice(only title)</Button>
</template>
<script>
    export default {
        methods: {
            open (nodesc) {
                this.$Notice.open({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            }
        }
    }
</script>

提醒类型

带有状态图标的提醒。

<template>
    <p>With desc</p>
    <Button @click="info(false)">Info</Button>
    <Button @click="success(false)">Success</Button>
    <Button @click="warning(false)">Warning</Button>
    <Button @click="error(false)">Error</Button>
    <p>Only title</p>
    <Button @click="info(true)">Info</Button>
    <Button @click="success(true)">Success</Button>
    <Button @click="warning(true)">Warning</Button>
    <Button @click="error(true)">Error</Button>
</template>
<script>
    export default {
        methods: {
            info (nodesc) {
                this.$Notice.info({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
            success (nodesc) {
                this.$Notice.success({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
            warning (nodesc) {
                this.$Notice.warning({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
            error (nodesc) {
                this.$Notice.error({
                    title: 'Notification title',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            }
        }
    }
</script>

自定义时长

自定义时长，为 0 则不自动关闭。也可以在Notice.config()中全局配置，详见API。

<template>
    <Button type="primary" @click="time">Open notice</Button>
</template>
<script>
    export default {
        methods: {
            time () {
                this.$Notice.open({
                    title: 'Notification title',
                    desc: 'This notification does not automatically close, and you need to click the close button to close.',
                    duration: 0
                });
            }
        }
    }
</script>

Render 函数

你可以自定义 Render 函数来替代 desc

<template>
    <Button type="primary" @click="renderFunc">Open notice</Button>
</template>
<script>
    export default {
        methods: {
            renderFunc () {
                this.$Notice.success({
                    title: 'Notification title',
                    desc: 'The desc will hide when you set render.',
                    render: h => {
                        return h('span', [
                            'This is created by ',
                            h('a', 'render'),
                            ' function'
                        ])
                    }
                });
            }
        }
    }
</script>

API

Notice instance

通过直接调用以下方法来使用组件：

• this.$Notice.open(config)
• this.$Notice.info(config)
• this.$Notice.success(config)
• this.$Notice.warning(config)
• this.$Notice.error(config)

以上方法隐式地创建及维护Vue组件。参数 config 为对象，具体说明如下：

另外提供了全局配置、全局关闭某个通知和全局销毁的方法：

• this.$Notice.config(options)
• this.$Notice.close(name)
• this.$Notice.destroy()

this.$Notice.config({
    top: 50,
    duration: 3
});