Vue自定义插件

当我们引用一些框架有时候会遇到Toast({message:'message'});或者this.$toast({message:'message'});等直接全局调用，而不需要像组件一样还要定义模板

注:这里只提供思路，具体花里胡哨样式特效自己把握

Toast({message:'message'}) 实现

1. 在components下新建Toast文件夹，然后新建一个toast.vue

<template>
    <div id="toast">
        <div>加载中{{ message }}</div>
    </div>
</template>
<style>
    #toast{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
</style>
<script>
export default {
    props: {
        message: {
            type: String,
            default: ''
        }
    },
}
</script>

2. 在新建Toast里新建一个toast.js

import Vue from 'vue';
import Toast from './toast.vue'

let Toast = (options = {}) => {
    let ToastConstructor = Vue.extend(Toast);
    let instance = new ToastConstructor({
        el: document.createElement('div')
    });
    // 此处为传递到toast.vue里面props的值
    instance.message='123';
    document.body.appendChild(instance.$el);
}
export default Toast

3. 然后代码里面就可以调用

import Toast from '@/components/Toast/toast.js'
...
Toast({
  message:"123"
});
...

this.$toast({message:'message'})实现

1. 第一步和上面的第一步一样
2. 在新建Toast里新建一个toast.js

import Toast from './toast.vue'

export default {
    install: function(Vue){
        Vue.prototype.$toast = function(){
            let ToastConstructor = Vue.extend(Toast);
            let instance = new ToastConstructor();
            // 此处为传递到toast.vue里面props的值
            instance.message='123';
            instance.$mount();
            document.body.appendChild(instance.$el);
        }
    }
}

2.或者这种写法,等价于上面

import Vue from 'vue';
import Toast from './toast.vue'

let Toast = (options = {}) => {
    let ToastConstructor = Vue.extend(Toast);
    let instance = new ToastConstructor({
        el: document.createElement('div')
    });
    // 此处为传递到toast.vue里面props的值
    instance.message='123';
    document.body.appendChild(instance.$el);
}
export default {
    install: function(Vue){
        Vue.$toast = Vue.prototype.$toast = Toast;
    },    
    Toast
}

3. 在main.js全局注册,然后即可

import Toast from '@/components/Toast/toast.js'
Vue.use(Toast);