Vue 手动封装Toast组件

<template>
    <transition name="fade">
        <div class="m-toast" v-show="show">
            <!-- <span v-if="type === 'success'">成功</span> -->
            {{message}}
        </div>
    </transition>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                message: '',
                type: ''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .m-toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2001;
        display: flex;
        flex-flow: column;
        align-items: center;
        padding: 10px 20px;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .fade-enter-active, .fade-leave-active {
        transition: 0.3s ease-out;
    }

    .fade-enter {
        opacity: 0;
    }

    .fade-leave-active {
        opacity: 0;
    }
</style>

``` JavaScript
**
 * Vue插件
 *
 * 原理：通过 vm.extend 构造器，将 .vue 文件做成一个"子类"，实例化后，挂载在html文档上，然后添加到body即可。具体的操控即可通过'实例'对象来组成了。
 *
 * 参考链接：
 * https://cn.vuejs.org/v2/api/#Vue-extend
 * https://cn.vuejs.org/v2/api/#vm-mount
 */

import ToastComponent from './Toast'

const Toast = {};

Toast.install = (Vue) => {
    // 第一步：使用基础 Vue 构造器，创建一个“子类”
    const ToastConstructor = Vue.extend(ToastComponent);
    // 第二步：创造一个组件实例
    const instance = new ToastConstructor();
    // 第三步：挂载实例
    instance.$mount();
    // 第四步：在body添加组件
    document.body.appendChild(instance.$el);

    // 第五步：添加实例方法，以供全局调用
    Vue.prototype.$toast = (msg, type, duration = 2000) => {
        instance.message = msg;
        instance.type = type;
        instance.show = true;
        setTimeout(() => {
            instance.show = false;
        }, duration)
    }
};

export default Toast;

最后在main.js

import Toast from './toast';

Vue.use(vClickOutside);
Vue.use(Toast);
Vue.use(Vlf);