Vue封装自己的插件

效果图：

image.png

1：先创建组件，并创建index.js文件

image.png

tosi.vue文件

index.js文件

import Tosi from "./Tosi";
const obj = {}
obj.install = function (Vue) {
//1、创建组件构造器
const toastCOntrustor= Vue.extend(Tosi)
//2、new的方式，根据组件构造器，可以创建来一个组件对象
const tosi = new toastContrustor()
//3、将组件对象，手动挂载到某一个元素上
tosi.$mount(document.createElement('div'))
//4、tois.$el对应的就是div
document.body.appendChild(tosi.$el)
Vue.prototype.$tosi = tosi
}
export default obj


2：在main.js里面进行挂载注册

import Vue from 'vue'
import App from './App.vue'
import tosi from "./components/common/tosi"
Vue.config.productiOnTip= false
Vue.use(tosi)
new Vue({
render: h => h(App)
}).$mount('#app')


3：进行调用

this.$tosi.show("你好", 2000)