【Vue】指令调用的全局组件

一、需求

多个页面需要使用同一个组件，页面文件多的情况下使用import方式页面会导致重复代码过多，所以这里采用了全局组件的方法，并且可以通过全局指令调用，使用方式与element的message组件相同

二、代码实现

模仿element的message组件，定义一个全局的抽屉组件，完整的组件文件结构：

定义组件，和正常封装一个组件一样，只是这里我们不直接放到页面的vue文件使用（main.vue）

<template>
  <el-drawer
    direction="rtl"
    :visible.sync="drawer"
    title="我是标题">
    <span>我来啦!</span>
  </el-drawer>
</template>

<script>
  export default {
    data() {
      return {
        drawer: false
      }
    }
  };
</script>

将定义好的组件通过Vue实例化，并将添加到根节点（main.js)

import Vue from "vue"; // 导入vue
import Main from './main.vue'vue // 导入组件

// 将组件作为参数，使用vue提供的全局方法，创建一个构造函数
let DrawerConstructor = Vue.extend(Main)

let instance;

const Drawer = function (options = {}){

  // 初始化实例，此时instance是一个组件实例，但未初始化未完成
  instance = new DrawerConstructor({
    data: options
  });

  // 完成初始化
  instance.$mount();

  // 将组件添加到根节点body
  document.body.appendChild(instance.$el);
}
Drawer.open = function (){
  Drawer()
  instance.visible = true;
}

export default Drawer

在index.js文件下导出

import Drawer from './src/main.js'
export default Drawer

全局定义（项目main.js）

// 导入自定义全局组件
import Drawer from "./components/drawer/index.js";
Vue.prototype.$drawer = Drawer

三、组件使用

this.$drawer.open()