Message 全局提示

全局展示操作反馈信息。

何时使用

• 可提供成功、警告和错误等反馈信息。
• 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

代码演示

普通提示

信息提醒反馈。

<template>
    <button type="button" class="ant-btn ant-btn-primary" @click="openMessage">
        <span>显示普通提醒</span>
    </button>
</template>
<script>
    export default {
        methods: {
            openMessage() {
                this.$message.info("这是一条普通的提醒");
            }
        }
    }
</script>

其他提示类型

包括成功、失败、警告。

<template>
    <button type="button" class="ant-btn" @click="openTypeMessage('success')">
        <span>success</span>
    </button>
    <button type="button" class="ant-btn" @click="openTypeMessage('error')">
        <span>error</span>
    </button>
    <button type="button" class="ant-btn" @click="openTypeMessage('warning')">
        <span>warning</span>
    </button>
</template>
<script>
    export default {
        methods: {
            openTypeMessage(type) {
                this.$message[type]("这是一条成功的提醒");
            }
        }
    }
</script>

修改延时

自定义时长 10s，默认时长为 1.5s。

<template>
    <button type="button" class="ant-btn ant-btn-primary" @click="openMessageCustomizeDuration">
        <span>显示延时提醒</span>
    </button>
</template>
<script>
    export default {
        methods: {
            openMessageCustomizeDuration() {
                this.$message.info("这是一条自定义duration的提醒", 10);
            }
        }
    }
</script>

加载中

进行全局 loading，异步自行移除。

<template>
    <button type="button" class="ant-btn ant-btn-primary" @click="openLoadingMessage">
        <span>显示加载中提醒</span>
    </button>
</template>
<script>
    export default {
        methods: {
            openLoadingMessage() {
                const hide = this.$message.loading("这是一条加载中的提醒", 0);
                setTimeout(hide, 2500);
            }
        }
    }
</script>

API

• this.$message.success(content, duration)
• this.$message.error(content, duration)
• this.$message.info(content, duration)
• this.$message.warning(content, duration)
• this.$message.loading(content, duration)

Props

组件提供了四个静态方法，参数如下：

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

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

this.$message.config({
  top: 100,
  duration: 2,
});