第一次写随笔，记录一下前端学习中的知识点
1.新建一个vue文件，将要写的插件抽取成组建模式，我定义了一个show方法，通过传入的message,time来实现toast的功能
<template>
<div class="toast" v-show="isshow">
{{message}}
</div>
</template>
<script>
export default{
data:()=>{
return{
message:'',
isshow:false
}
},
methods:{
show(message,time){
this.isshow=true
this.message=message
setTimeout(()=>{
this.isshow=false
},time)
}
}
}
</script>
2.建一个js文件，为obj定义了一个install方法，当使用插件时会将插件挂载到页面上，并在vue的原型里添加了$toast
import Toast from '../toast.vue'
const obj={
}
obj.install=function (Vue) {
const toastContrustor= Vue.extend(Toast)
const toast=new toastContrustor()
toast.$mount(document.createElement('div'))
document.body.appendChild(toast.$el)
Vue.prototype.$toast=toast
}
export default obj
3.在main.js中就可以使用toast了
import toast from 'components/common/toastCJ/index.js'
Vue.use(toast)
4.在需要调用toast的时候通过 this.$toast.show(传参)即可
补充:
在第二步中，为何不能直接通过document.appendChild(toast.$el),
好像是因为toast必须使用组件构造器，且手动挂载到div上，也不知道是不是因为这样，还需要各位大佬指点一下
