Vue服务式全局调用弹出框插件

公司项目突然要增加一个这么一个功能：对添加的产品进行对照，如果产品不正确，那个对不正确的产品在弹出框中展示出来，而由于涉及的页面比较多，如果一个一个去写弹出框，在写逻辑太过于麻烦。

方案一

直接写个组件插件，然后在需要的地方引入

组件：productCheckResult.vue：

<template>
  <div>
    <el-dialog
      width="70%"
      top="7vh"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div slot="title">
        <span class="result-check-tips">{{title}}</span>
      </div>
      <c-table
        :isPage="false"
        :data="list"
        :columns="header"
        dragTableKey="dragTableKeyCheckResult"
      >
        <template slot="num" slot-scope="item">
          <div>{{item.bodyItemIndex+1}}</div>
        </template>
      </c-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="mini">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      title: "",
      list: [],
      header: []
    };
  },
  methods: {
    getProductCheckResult(options) {
     this.type=options.type;
      this.title = options.msg;
      this.list = options.data;
      this.dialogFormVisible = true;
    },
    cancel() {
      this.dialogFormVisible = false;
    }
  }
};
</script>

新建productCheckResult.js文件添加组件插件：

import productCheckResult from './productCheckResult.vue'
export default {
  install: function (Vue) {
    Vue.component("p-check-result", productCheckResult)
    }
  }
}

main.js全局添加插件

import productCheckResult from "@/views/components/productCheck/productCheckResult.js";
Vue.use(productCheckResult)

使用：

<template>
	<p-check-result ref="check"></p-check-result>
</template>
export default {
	....
	在需要的地方调用
	this.$ref.check.getProductCheckResult();
}

方案二

方案一对于如果页面较少且变化较大的可以使用，毕竟每个页面都去引用一下这个组件，甚为繁琐，这个时候方案二的服务式调用就更快捷爽快！

组件：productCheckResult.vue：同方案一

新建productCheckResult.js文件添加组件插件：

import productCheckResult from './productCheckResult.vue'
export default {
  install: function (Vue) {
    const productCheckResultInstance = Vue.extend(productCheckResult)
    let productCheckResultInit;
    const initInstance = () => {
      // 实例化vue实例
      productCheckResultInit = new productCheckResultInstance();
      let productCheckResultEl = productCheckResultInit.$mount().$el;
      document.body.appendChild(productCheckResultEl);
    };
    Vue.prototype.$Dialog = {
      getProductCheckResult(options) {
        if (!productCheckResultInit) {
          initInstance();
        }
        console.log(options)
        productCheckResultInit.getProductCheckResult(options)
      }
    }
  }
}

main.js全局添加插件 同方案一’

使用：
直接在需要的地方调用即可

let options={
	type:"",
	msg:"",
	data:""
}
this.$Dialog.getProductCheckResult(options);