插件分类
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-custom-element // 逻辑... } Vue.directive('my-directive', { // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) Vue.mixin({ created: function () { // 3. 通过全局 mixin方法添加一些组件选项，如: vuex // 逻辑... } ... }) Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现 // 逻辑... } }loading插件写法
目录结构：
1.loading组件
nwd-loading.vue：
<template> <div class="nwd-loading" v-show="show"> <div>{{text}}</div> </div> </template> <script> export default { props: { show: Boolean, text: "正在加载中..." } } </script>2.封装插件
index.js
import NwdLoadingComponent from './nwd-loading' let $vm; export default { install(Vue,options) { if(!$vm) { const NwdLoadingPlugin = Vue.extend(NwdLoadingComponent); $vm = new NwdLoadingPlugin({ el: document.createElement('div') }); } $vm.show = false; let loading = { show(text) { $vm.show = true; $vm.text = text; document.body.appendChild($vm.$el); }, hide() { $vm.show = false; } }; if (!Vue.$loading) { Vue.$loading = loading; } // Vue.prototype.$loading = Vue.$loading; Vue.mixin({ created() { this.$loading = Vue.$loading; } }) } }注释：通过Vue.extend()方法创建了一个构造器NwdLoadingPlugin，其次我们再通过new NwdLoadingPlugin() 创建了实例$vm，并挂载到一个div元素上。最后我们需要通过document.body.appendChild($vm.$el)将其插入到DOM节点中。
当我们创建了$vm实例后，我们可以访问该实例的属性和方法，比如通过$vm.show就可以改变NwdLoadingComponent组件的show值来控制其显示隐藏。
最终我们通过Vue.mixin或者Vue.prototype.$loading来全局添加了$loading事件，其又包含了show和hide两个方法。我们可以直接在页面中使用this.$loading.show()来显示加载，使用this.$loading.hide()来关闭加载。
3.使用插件
main.js
import NwdLoading from '@/components/nwd-loading/index.js' Vue.use(NwdLoading)
4. 调用插件
....vue
export default { created() { this.$loading.show("loading内容") } }作者：飞旋的留恋
链接：https://juejin.im/post/5b30b6d5e51d45587b48146b
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
随时随地看视频
