v-easy-components

# Message

Commonly used for feedback prompts after active operation.

# Basic usage

Appears from the top and disappears automatically after 3 seconds. Move in and remove automatically disappears, and the removal starts automatically disappearing

<template>
  <ve-button @click="send('info')" plain>info</ve-button>
  <ve-button @click="send('success')" plain type="success">success</ve-button>
  <ve-button @click="send('warning')" plain type="warning">warning</ve-button>
  <ve-button @click="send('error')" plain type="error">error</ve-button>
</template>

<script>
  export default {
    methods: {
      send(type) {
        this.$msg({
          type,
          message :'Message',
          duration: 2000,
        });
      },
    },
  };
</script>

# Cannot be closed

Shadow close button.

The default Message has a close button that can pass showClose to hide the close button. And you can pass duration to 0 to prevent Message from automatically closing. The default is 3000 milliseconds.
<template>
  <ve-button @click="send('info', 0, true)" plain>info</ve-button>
  <ve-button @click="send('success', 2000)" plain type="success">success</ve-button>
  <ve-button @click="send('warning', 2000)" plain type="warning">warning</ve-button>
  <ve-button @click="send('error', 2000)" plain type="error">error</ve-button>
</template>

<script>
  export default {
    methods: {
      send(type, duration, showClose) {
        this.$msg({
          type,
          showClose,
          message :'Message',
          duration: duration || 0,
        });
      },
    },
  };
</script>

# Callback after closing

use onClose: e => console.log(e) Discovery information is turned off

In some scenarios it may be necessary to catch the Message close event, we can configure an onClose function on option , triggered after Message is closed
<template>
  <ve-button @click="sendOnClose('info')" type="success">关闭后的回调</ve-button>
  <p :style="{color: color}">{{ msg }}</p>
</template>

<script>
  export default {
    methods: {
      sendOnClose(type) {
        this.msg = 'Be opened';
        this.color = '#5e6d82';
        this.$msg({
          type,
          message: 'Mesage',
          duration: 5000,
          onClose: () => {
            this.msg = 'Is closed';
            this.color = '#f53939';
          },
        });
      },
    },
  };
</script>

# Global method

v-easy-components added the global method $msg to Vue.prototype. So in the vue instance you can call Message in the same way as this page.

# Options

Parameter Description Type Optional value Defaults
type theme string success/warning/info/error info
message Message text string - -
duration Display time, milliseconds number - 3000
showClose Whether to display the close button boolean - true
onClose Callback function when closed, parameter is the message instance being closed function - -

# Message Methods

Method name Description
close Close the current Message

← ColorPicker →