VUE：从toast组件到toast插件（二）
在上一篇文章当中，我们简述了在vue的项目中toast组件的使用，可以说是非常麻烦，现在我就来简述一下如何搞一个toast插件。
其实比较理想的使用方式是在项目中随心所欲的使用，如：this.$toast.show("展示的内容", 多长时间后关闭)。
一、改造Toast.vue
//components/common/toast/Toast.vue{{content}}
上面是在Toast组件中写了一个show方法，自主控制显示和隐藏；
二、关键的一步，在同级目录下创建一个插件入口文件index.js
//components/common/toast/index.jsimport Toast from './Toast.vue';const obj = {};obj.install = function(Vue){// 1.创建组件构造器const toastContrustor = Vue.extend(Toast);// 2.new的方式，根据组件构造器，可以创建出一个组件对象const toast = new toastContrustor();// 3.将组件对象，手动挂载到某一个元素上toast.$mount(document.createElement('div'))// 4.toast.$el对应的就是divdocument.body.appendChild(toast.$el)Vue.prototype.$toast = toast;
}export default obj;每一步的注释我都写上去了，不要问为什么，问了就是不知道；
三、在项目入口文件main.js引入并使用
// main.jsimport Vue from 'vue';
import toast from 'common/toast';Vue.use(toast);四、接下来，就是随心所欲的使用了
// views/home/Home.vue
基本上四部就可以搞定了，如果有啥疑问，欢迎交流，最后感谢coderwhy老师！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！