Message 全局提示

轻量级的信息反馈组件，在顶部居中显示，并自动消失。有多种不同的提示状态可选择。

普通提示

最基本的提示，默认在1.5秒后消失。

提示类型

不同的提示状态：成功、警告、错误。

    <Button @click="success">Display success prompt</Button>
    <Button @click="warning">Display warning prompt</Button>
    <Button @click="error">Display error prompt</Button>
</template>
    export default {
        methods: {
            success () {
                this.$Message.success('This is a success tip');
            },
                this.$Message.warning('This is a warning tip');
            },
            error () {
            }
        }
    }
</script>

带背景色

^4.0.0 设置属性 background 后，通知提示会显示背景色。

加载中

Loading 的状态，并异步在某个时机移除。

<template>
    <Button @click="loading">Display loading...</Button>
</template>
<script>
    export default {
        methods: {
            loading () {
                const msg = this.$Message.loading({
                    content: 'Loading...',
                    duration: 0
                });
                setTimeout(msg, 3000);
            },
        }
    }
</script>

自定义时长

自定义时长，也可以在中全局配置，详见API。

可关闭

将参数设置为一个对象，并指定 closable 为 true 后可以手动关闭提示，完整参数详见API。

<template>
    <Button @click="closable">Display a closable message</Button>
</template>
<script>
    export default {
        methods: {
            closable () {
                this.$Message.info({
                    content: 'Tips for manual closing',
                    duration: 10,
                    closable: true
                });
            }
        }
    }
</script>

自定义 Render 函数

使用 Render 函数自定义内容。

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

• this.$Message.info(config)
• this.$Message.success(config)
• this.$Message.warning(config)
• this.$Message.error(config)
• this.$Message.loading(config)以上方法隐式的创建及维护 Vue 组件。参数 config 可以是字符串或对象，当为字符串时，直接显示内容，当为对象时，具体说明如下：

• this.$Message.destroy()

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