Message 全局提示

概述

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

代码示例

普通提示

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

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

提示类型

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

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

带背景色

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

<template>
    <div>
        <Button @click="background('info')">显示普通提示</Button>
        <Button @click="background('success')">显示成功提示</Button>
        <Button @click="background('warning')">显示警告提示</Button>
        <Button @click="background('error')">显示错误提示</Button>
    </div>
</template>
<script>
    export default {
        methods: {
            background (type) {
                this.$Message[type]({
                    background: true,
                    content: '这是一条带背景色的通知'
                });
            }
        }
    }
</script>

加载中

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>

自定义时长

自定义时长，也可以在Message.config()中全局配置，详见API。

<template>
    <Button @click="time">Displays a 10 second prompt</Button>
</template>
<script>
    export default {
        methods: {
            this.$Message.info({
                content: 'I'll be gone in 10 seconds',
                duration: 10
            });
        }
    }
</script>

可关闭

将参数设置为一个对象，并指定 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 函数自定义内容。

<template>
<Button @click="renderFunc">show message</Button>
</template>
<script>
    export default {
        methods: {
            renderFunc () {
                this.$Message.info({
                    render: h => {
                        return h('span', [
                            'This is created by ',
                            h('a', 'render'),
                            ' function'
                        ])
                    }
                });
            }
        }
    }
</script>

API

Message instance

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

• this.$Message.info(config)
• this.$Message.success(config)
• this.$Message.warning(config)
• this.$Message.error(config)
• this.$Message.loading(config)

以上方法隐式的创建及维护 Vue 组件。参数 config 可以是字符串或对象，当为字符串时，直接显示内容，当为对象时，具体说明如下：

另外提供了全局配置和全局销毁的方法：

• this.$Message.config(options)
• this.$Message.destroy()

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