- 首页 > it技术 > >
首先我们要知道我们这个toast组件是怎么调用的，一般来说都是全局的 类似于这样
this.$toast({
content:'你好',
duration:2000
}).show();
所以我们需要向vue的prototype 绑定一个$toast方法
import Vue from 'vue'
import toast from './component/toast'
Vue.prototype.$toast = toast;
【写一个toast组件】我们的文件大概是这样的 一个js 一个vue文件
文章图片
image.png
import Vue from 'vue';
import Toast from './index.vue'export default function toast (props){ // 导出一个方法 方法接受一个参数
const vm = new Vue({ // 生成一个vue实例
render (h) { // 虚拟dom
return h(Toast,{props})
}
}).$mount();
// 创建一个组件实例 这里不能挂载到body上 必须手动append
document.body.appendChild(vm.$el);
// append 组件dom
const comp = vm.$children[0];
// 获取实例内第一个组件 也就是toast.vue 因为就这一个
comp.remove = function () { // 穿建一个销毁方法 避免内存泄漏
document.body.removeChild(vm.$el);
vm.$destroy()
}
return comp// 最后我们吧这个组件return出去
}
{{content}}
.toastInfo{
position: fixed;
left: 50%;
top: 10px;
transform: translateX(-50%);
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px 10px;
border-radius: 2px;
}
推荐阅读
