一直依赖都在用element-ui，过分依赖别人造的轮子，用起来着实舒服。但是似懂非懂的状态，遇到点问题直接憋出内伤！！！学习一下extend，搞一个全局的提示组件，做好笔记，防止以后用得到的时候犯傻！

components目录下新建message文件夹，如下：

components-
    -- message/
        -- message.vue
        -- index.js

message.vue文件：

<template>
    <transition v-if="show">
        <div class="app_message">
            <div class="tip" v-if="type == 'tip'">
                <span>{{message}}</span>
            </div>
            <div class="message" v-if="type != 'tip'">
                <i class="mshome" :class="icon"></i>
                <p>{{message}}}</p>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    data (){
        return {
            show: false,
            type: 'tip', // tip = 轻提示，success = 成功，error = 错误，warn = 警告
            icon: '',
            message: ''
        }
    },
    mounted (){
        let that = this;
        let timer = setTimeout( ()=>{
            that.show = false;
        }, 2000)
    }
}
</script>

<style lang="less" scoped>
    .app_message{
        width: 100%;
        position: fixed;
        top: 25%;
        z-index: 9999;
        text-align: center;
        .tip{
            display: inline;
            font-size: 1.4rem;
            background: rgba(0, 0, 0, 0.7);
            padding: 0.7rem 4rem;
            border-radius: 0.3rem;
            span{
                color: #FFFFFF;
            }
        }
    }
</style>

index.js文件：

import Vue from 'vue'
import message from './message.vue'

// 初始化
const MessageTemplate = Vue.extend(message);

const messageItem = (options = {}) => {
    options.show = true;
    
    // 创建实例
    const vm = new MessageTemplate({
        data: options // 这个data = 组件里的data
    })

    // 挂载到 $mount
    vm.$mount()

    // 输出到body里
    document.body.appendChild(vm.$el)
    
    return vm
}

export default messageItem

然后，在vue入口main.js里面引入并挂载message：

import message from './components/message/index.js'
Vue.prototype.$message = message

完成以后，就可以在全局调用message组件，：

this.$message({
    message: 'ss',
})