Vue自定义开发插件

好久没写博客了，找实习自闭了，一直找不到。废话不多说。开整。
自定义插件优点（个人理解）：全局的组件，容易扩展，容易使用。
自己只是学到点皮毛，分享一下代码。

我写的是一个加载中的插件（比较简单）

• 新建 plugins 文件夹
  在 src 文件夹下新建 plugins 文件夹，我的目录如下：
  
• 代码如下
  在 MyTestPlugin 文件夹下新建 index.js 文件

const myPlugin = {
  // 因为要用 vue.use 所以要用 install 方法，传入的参数为 vue 实例
  install: function(vue) {
    const MyPlugin = vue.extend({
      template: '<div id="my-plugin">{{ msg }}</div>',
      props: {
        msg: {
          type: String,
          default: "加载中..."
        }
      }
    }, 'MyTestPlugin')
    
    function loading(msg) {
      // 创建节点
      var div = document.createElement('div')
      div.setAttribute('id', 'myplugin')
      var body = document.querySelector('body')
      body.appendChild(div)

      // 创建插件实例并挂载
      new MyPlugin({
        props: {
          msg: {
            type: String,
            default: msg
          }
        }
      }).$mount("#myplugin")
      return () => {
        // 删除节点
        var element = document.getElementById("my-plugin")
        element.remove()
        console.log("执行")
      }
    }
    // vue 实例的原型上添加 $myPlugin 属性，属性值为 loading 方法
    vue.prototype.$myPlugin = loading
  }
}

export default myPlugin

• use 插件
  打开 main.js 文件，import 插件并 use

import myPlugin from './plugins/MyTestPlugin/index'

Vue.use(myPlugin)

• 使用插件
  在 App.js 文件内写

<template>
  <div id="app">
    <button @click="showMyPlugin">我是按钮</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      // 放定时器
      time: null,
    };
  },
  components: {},
  methods: {
    showMyPlugin() {
      // 由于插件是挂在 vue 实例原型上，所以用 this.$myPlugin可以直接调用
      let hide = this.$myPlugin("小卡车，正在飞奔过来...");
      // 定时器：三秒后执行插件中的 return 函数中的删除节点操作
      this.time = setTimeout(() => {
        hide();
      }, 3000);
    },
  },
  destroyed() {
    // 在组件销毁后清理定时器，这是好习惯
    clearTimeout(this.time);
  },
};
</script>

<style>
#my-plugin {
  width: 100%;
  height: 100vh;
  background: #38d1ab;
  text-align: center;
  line-height: 100vh;
  font-weight: bolder;
}
</style>

• 最终执行结果
  
  点击按钮后
  
  间隔三秒后，消失，恢复原来界面

继续找实习，继续自闭，面试机会都没有