使用流程

  1. 功能：用于增强Vue
  2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
  3. 定义插件：

    plugins.js(一般main同级) 

  1. export default{
  2.   //参数：1.Vue- vm 2.options接受其他参数用于指定filter内容等
  3.   install (Vue, options) {
  4.     // 1. 添加全局过滤器
  5.     Vue.filter(....)
  7.     // 2. 添加全局指令
  8.     Vue.directive(....)
  10.     // 3. 配置全局混入(合)
  11.     Vue.mixin(....)
  13.     // 4. 添加实例方法
  14.     Vue.prototype.$myMethod = function () {...}
  15.     Vue.prototype.$myProperty = xxxx
  16.     }
  17. }
  1. 使用插件：Vue.use()

    main.js

  1. import plugins from './plugins'
  2. Vue.use(plugins,1,2,3)

项目实例 - Loading提示框

调用接口时loading…

手写插件 - Loading.vue

src/plugin/loading.vue

  1. <template>
  2.     <div class="container" v-show="isShow">
  3.       <div class="loading"></div>
  4.       <p class="title">{{title}}</p>
  5.     </div>
  6. </template>
  8. <script>
  9. export default {
  10.   name: 'Loading',
  11.   data: function () {
  12.     return {
  13.       title: '正在加载...',
  14.       isShow: false
  15.     }
  16.   }
  17. }
  18. </script>
  20. <style scoped lang="scss">
  21.   .container{
  22.     width: 200px;
  23.     height: 200px;
  24.     border-radius: 20px;
  25.     background: rgba(0,0,0,0.5);
  26.     position: absolute;
  27.     left: 50%;
  28.     top: 50%;
  29.     transform: translate(-50%, -50%);
  30.     .loading{
  31.       width: 100px;
  32.       height: 100px;
  33.       border-radius: 50%;
  34.       border: 5px solid #fff;
  35.       margin: 20px auto;
  36.       border-right-color: #409eff;
  37.       animation: loading 2s linear infinite;
  38.     }
  39.     .title{
  40.       text-align: center;
  41.       font-size: 16px;
  42.       color: #fff;
  43.     }
  44.   }
  45.   @keyframes loading {
  46.     from{
  47.       transform: rotate(0deg);
  48.     }
  49.     to{
  50.       transform: rotate(360deg);
  51.     }
  52.   }
  53. </style>

插件配置 - index.js

src/plugin/index.js

// import Vue from 'vue'
import Loading from './Loading'

export default {
  // 注意点: 如果要将一个组件封装成一个插件, 那么必须提供一个install方法
  //必须在install方法中注册当前的这个组件
  install: function (Vue, Options) {
    // Vue.component(Loading.name, Loading)

    // 1.根据我们的组件生成一个构造函数
    //调用Vue.extend，返回的都是一个全新的VueComponent
    let LoadingContructor = Vue.extend(Loading)
    // 2.根据构造函数创建实例对象
    let LoadingInstance = new LoadingContructor()
    // 3.随便创建一个标签(元素)
    let oDiv = document.createElement('div')
    // 4.将创建好的标签添加到界面上
    document.body.appendChild(oDiv)
    // 5.将创建好的实例对象挂载到创建好的元素上
    LoadingInstance.$mount(oDiv)

    /* 3 4 5 可以改为如下 并且可以传data 修改data
        let LoadingInstance = new LoadingContructor({
            el:document.createElement('div'),
            data(){
                return {title2: 'ing~',}
            }
        })
        document.body.appendChild(LoadingInstance.$el)
        LoadingInstance.title2 = 'ing~~~'
     */

    // console.log(Options)
    // console.log(LoadingInstance.title)
    // 添加初始化值
    if (Options && Options.title !== null && Options.title !== undefined) {
      LoadingInstance.title = Options.title
    }
    // 添加全局方法
    Vue.showLoading = function () {
      LoadingInstance.isShow = true
    }
    Vue.hiddenLoading = function () {
      LoadingInstance.isShow = false
    }
    // 添加实例方法
    Vue.prototype.$showLoading = function () {
      LoadingInstance.isShow = true
    }
    Vue.prototype.$hiddenLoading = function () {
      LoadingInstance.isShow = false
    }
  }
}

导入插件 - main.js

import Vue from 'vue'
import Loading from './plugin/loading/index'

//use方法接受一个对象或函数，对象必须有install，函数则会被调用不需要install
Vue.use(Loading,{
  title:'正在加载...'
})

使用插件 - axios调用时

import Vue from 'vue'

let count = 0 //记录请求次数
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  count++
  Vue.showLoading()
  return config
}, function (error) {
  // 对请求错误做些什么
  Vue.hiddenLoading()
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  count--
  if (count === 0) {
    Vue.hiddenLoading()
  }
  return response
}, function (error) {
  // 对响应错误做点什么
  Vue.hiddenLoading()
  return Promise.reject(error)
})