Vue-Plugin开发插件

1.Vue.use()做了什么事情?

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

2.什么时候需要定义插件?

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

3.如何自定义一个插件?

开发插件

---

4.创建一个Loading的插件

1.步骤如下

1. 在src文件夹下创建plugin文件夹，plugin下创建文件夹loading，loading文件夹下创建loading.vue和index.js文件
2. loading.vue下创建好loading的内容
3. 在index.js:如果要将一个组件封装成一个插件, 那么必须提供一个install方法.必须在install方法中注册当前的这个组件

loading.vue

<template>
    <div class="container">
      <div class="loading"></div>
      <p class="title">正在加载...</p>
    </div>
</template>

<script>
export default {
  name: 'Loading'
}
</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>

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)
    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)

    // 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 Loading from './plugin/loading/index'
// 注意点: 如果想通过use的方式来注册组件, 那么必须先将组件封装成插件
Vue.use(Loading, {
  title: '加载中...'
})

---

5.vue.extend

vue官网vue-extend

6.Vue.use( plugin )

Vue.use( plugin )

7.Vue.js 的插件应该暴露一个 install 方法

---

学习笔记❥(^_-)