V-easy

npm install v-easy-message -s

import vEasy from 'v-easy-message'

Vue.use(vEasy);

import vEasy from 'v-easy-message'
import locale from 'v-easy-message/local/en'

Vue.use(vEasy, { locale });

// webpack.base.conf.js
module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('/node_modules/v-easy-message')]
      }
    ]
},

// vue.config.js (vue-cli3)
transpileDependencies: ['v-easy-message']

<template>
    <VEButton @click="send('info')" class="center" type="primary" icon="chrome" :rotate="true" :circle="true"></VEButton>
    <VEPlainInput v-model="str" message="字符超出范围" 
        :options="{min: 20,max: 30}" 
        @input="plainInput"></VEPlainInput>
</template>

<script>
export default {
    data() {
        return: {
            str: ''
        }
    },
    methods: {
        plainInput(val) {
            console.log(`%c input ${this.str}`, 'color: blue');
        },
        send(type) {
            this.$msg({
                type: type, //'success', 'error','info','warning'
                message: 'infomation',
                duration: 3000,
                onClose: () => {
                    console.log('callback');
                }
            });
        }
    }
}
</script>