全局提示

<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>

<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>

<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>

<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>