19-Vue-Plugin

image

前言

随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的 loding 插件，来了解掌握插件的开发和使用。

什么是Vue.use(plugin)

Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用

用法：
Vue.use(plugin)

• 如果插件是一个对象，必须提供 install 方法。
• 如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
• Vue.use(plugin)调用之后，插件的install方法就会默认接受到一个参数，这个参数就是Vue

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

总结：Vue.use是官方提供给开发者的一个api，用来注册、安装Vuex、vue-router、ElementUI之类的插件的。

什么时候需要定义插件

当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件
例如: 网络加载指示器

开发Loding插件

1. 在src目录下新建一个plugin文件夹，在这个目录进行封装

2. 在plugin目录下新建一个loding文件夹，并将封装好的组件放到这个文件夹，在这个文件夹下还需要一个index.js文件

Loding.vue

<template>
  <div class="container" v-show="isShow">
    <div class="loading"></div>
    <p class="title">{{title}}</p>
  </div>
</template>

<script>
export default {
  name: 'Loading',
  data: function () {
    return {
      title: '正在加载...',
      isShow: false
    }
  }
}
</script>

<style scoped lang="scss">
  .container{
    width: 200px;
    height: 200px;
    border-radius: 20px;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .loading{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 5px solid #fff;
      margin: 20px auto;
      border-right-color: #409eff;
      animation: loading 2s linear infinite;
    }
    .title{
      text-align: center;
      font-size: 16px;
      color: #fff;
    }
    @keyframes loading {
      from{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }
    }
  }
</style>

3. 在index.js文件中编写业务逻辑代码

• 如果要将一个组件封装成一个插件, 那么必须提供一个install方法，必须在install方法中注册当前的这个组件
  这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象

export default {
  install: function (Vue, Options) {
  }
}

• 将组件添加到界面上

import Loading from './Loading'

export default {
  install: function (Vue, Options) {
    // 1.根据我们的组件生成一个构造函数
    const LoadingContructor = Vue.extend(Loading)
    // 2.根据构造函数创建实例对象
    const LoadingInstance = new LoadingContructor()
    // 3.随便创建一个标签(元素)
    const oDiv = document.createElement('div')
    // 4.将创建好的标签添加到界面上
    document.body.appendChild(oDiv)
    // 5.将创建好的实例对象挂载到创建好的元素上
    LoadingInstance.$mount(oDiv)
  }
}

• 添加初始化值

export default {
  install: function (Vue, Options) {
    ...
    if (Options && Options.title !== null && Options.title !== undefined) {
      LoadingInstance.title = Options.title
    }
  }
}

• 添加全局方法

export default {
  install: function (Vue, Options) {
    ...
    Vue.showLoading = function () {
      LoadingInstance.isShow = true
    }
    Vue.hiddenLoading = function () {
      LoadingInstance.isShow = false
    }
  }
}

• 添加实例方法

export default {
 install: function (Vue, Options) {
   ...
   Vue.prototype.$showLoading = function () {
     LoadingInstance.isShow = true
   }
   Vue.prototype.$hiddenLoading = function () {
     LoadingInstance.isShow = false
   }
 }
}

4. 在main.js中导入插件

注意: 这里需要导入插件的index.js文件
Vue.use()方法中的第二个参数即是传给install方法的第二个参数

import Loading from './plugin/loading/index.js'

Vue.use(Loading, {
  title: '皇帝不急太监急'
})

5. 在App.vue中使用

<template>
    <div id="app">
      <button @click="myFn1">显示</button>
      <button @click="myFn2">隐藏</button>
    </div>
</template>

<script>
// import Vue from 'vue'
export default {
  methods: {
    myFn1 () {
      // 通过全局方法调用
      // Vue.showLoading()
      // 通过实例方法调用
      this.$showLoading()
    },
    myFn2 () {
      // Vue.hiddenLoading()
      this.$hiddenLoading()
    }
  }
}
</script>

<style scoped>

</style>

效果：

image