Message 全局提示

概述

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

代码示例

Message 全局提示 - 图1

普通提示

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

  1. <template>
  2. <Button type="primary" @click="info">Display info prompt</Button>
  3. </template>
  4. <script>
  5. export default {
  6. methods: {
  7. info () {
  8. this.$Message.info('This is a info tip');
  9. }
  10. }
  11. }
  12. </script>

Message 全局提示 - 图2

提示类型

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

  1. <template>
  2. <Button @click="success">Display success prompt</Button>
  3. <Button @click="warning">Display warning prompt</Button>
  4. <Button @click="error">Display error prompt</Button>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. success () {
  10. this.$Message.success('This is a success tip');
  11. },
  12. warning () {
  13. this.$Message.warning('This is a warning tip');
  14. },
  15. error () {
  16. this.$Message.error('This is an error tip');
  17. }
  18. }
  19. }
  20. </script>

Message 全局提示 - 图3

带背景色

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

  1. <template>
  2. <div>
  3. <Button @click="background('info')">显示普通提示</Button>
  4. <Button @click="background('success')">显示成功提示</Button>
  5. <Button @click="background('warning')">显示警告提示</Button>
  6. <Button @click="background('error')">显示错误提示</Button>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. methods: {
  12. background (type) {
  13. this.$Message[type]({
  14. background: true,
  15. content: '这是一条带背景色的通知'
  16. });
  17. }
  18. }
  19. }
  20. </script>

Message 全局提示 - 图4

加载中

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 全局提示 - 图5

自定义时长

自定义时长,也可以在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>

Message 全局提示 - 图6

可关闭

将参数设置为一个对象,并指定 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>

Message 全局提示 - 图7

自定义 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 可以是字符串或对象,当为字符串时,直接显示内容,当为对象时,具体说明如下:
属性说明类型默认值
content提示内容String-
render自定义描述内容,使用 Vue 的 Render 函数Function-
duration自动关闭的延时,单位秒,不关闭可以写 0Number1.5
onClose关闭时的回调Function-
closable是否显示关闭按钮Booleanfalse
background 4.0.0是否显示背景色Booleanfalse

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

  • this.$Message.config(options)
  • this.$Message.destroy()
this.$Message.config({
    top: 50,
    duration: 3
});
属性说明类型默认值
top提示组件距离顶端的距离,单位像素Number24
duration默认自动关闭的延时,单位秒Number1.5