vue 公共弹窗实现

业务背景：在流程审批系统，需要弹出审批人列表，供提交审批的人进行选择，因为多业务模块需要共用这个弹出审批人列表，所以写在业务vue里面不合适，需要抽取成公共的代码。

第一步：写公共弹出vue

<template>
  <div>
    
    <!-- 流程弹出审批人对话框 -->
    <el-dialog :title="title" :visible.sync="openApprove" width="550px" append-to-body>
<!-- 编写需要的控件 -->
    </el-dialog>
    </div>
</template>

第二步：需要引入弹窗的vue

引入公共弹出vue

import popUsers from '@/views/workflow/config/popUsers'

注册成组件

components: {
      popUsers
  },

vue页面

<!-- 弹出审批人窗口 -->
    <popUsers ref="popUsers" ></popUsers>

第四步调用，最关键的一步，好多文章上都没有讲，可能是vue高手，清楚怎么调用，对于第一天使用的vue的人来说，还是比较难，

 handleSubmit2(row){
      this.reset();
      const id = row.id || this.ids;
      //this.$refs.popUsers.openApprove=true;
      this.$refs.popUsers.handleSubmit(id);
    },

这样就可以调用了。还有就是把弹窗注册成全局组件，就能省掉引入公共弹出vue 和 注册成组件 这两部。

第一天使用vue，感觉非常强大。