全局提示

全局展示操作反馈信息。

何时使用

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

代码演示

普通提示

信息提醒反馈。

<template>
  <a-button type="primary" @click="info">Display normal message</a-button>
</template>
<script>
  export default {
    methods: {
      info () {
        this.$message.info('This is a normal message');
      },
    }
  }
</script>

修改延时

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

<template>
  <a-button @click="success">Customized display duration</a-button>
</template>
<script>
export default {
  methods: {
    success () {
      this.$message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
    },
  }
}
</script>

加载中

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

<template>
  <a-button @click="success">Display a loading indicator</a-button>
</template>
<script>
  export default {
    methods: {
      success () {
        const hide = this.$message.loading('Action in progress..', 0);
        setTimeout(hide, 2500);
      },
    }
  }
</script>

其他提示类型

包括成功、失败、警告。

<template>
  <div>
    <a-button @click="success">Success</a-button>
    <a-button @click="error">Error</a-button>
    <a-button @click="warning">Warning</a-button>
  </div>
</template>
<script>
  export default {
    methods: {
      success () {
        this.$message.success('This is a message of success');
      },
      error () {
        this.$message.error('This is a message of error');
      },
      warning () {
        this.$message.warning('This is message of warning');
      },
    }
  }
</script>

Promise 接口

可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 message 将要结束时通过 then 显示新的 message 。

<template>
  <a-button @click="success">Display a sequence of message</a-button>
</template>
<script>
  export default {
    methods: {
      success () {
        this.$message.loading('Action in progress..', 2.5)
          .then(() => this.$message.success('Loading finished', 2.5))
          .then(() => this.$message.info('Loading finished is finished', 2.5));
      },
    }
  }
</script>

API

组件提供了一些静态方法，使用方式和参数如下：

• message.success(content, [duration], onClose)
• message.error(content, [duration], onClose)
• message.info(content, [duration], onClose)
• message.warning(content, [duration], onClose)
• message.warn(content, [duration], onClose) // alias of warning
• message.loading(content, [duration], onClose)

  参数	说明	类型	默认值
  content	提示内容	string| VNode |(h) => VNode	-
  duration	自动关闭的延时，单位秒。设为 0 时不自动关闭。	number	3
  onClose	关闭时触发的回调函数	Function	-

组件同时提供 promise 接口

• messagelevel.then(afterClose)

• messagelevel.then(afterClose)
  其中message[level] 是组件已经提供的静态方法。then 接口返回值是 Promise 。

• message.open(config)

  参数	说明	类型	默认值
  content	提示内容	string| VNode |(h) => VNode	-
  duration	自动关闭的延时，单位秒。设为 0 时不自动关闭。	number	3
  onClose	关闭时触发的回调函数	Function	-
  icon	自定义图标	string| VNode |(h) => VNode	-

全局方法

还提供了全局配置和全局销毁方法：

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

message.config

message.config({
  top: `100px`,
  duration: 2,
  maxCount: 3,
});