最近，有个朋友，想通过封装element-ui组件弹窗在js文件中通过状态控制达到弹出效果，为此，我也查到了相关文章：vue中如何用纯js调用组件_vue在js文件中使用vue组件-CSDN博客
这里我就写一下我通过上述文章封装el-dialog弹窗的过程。

第一步，封装一个组件文件-elDialog.vue
<template>
    <el-dialog :title="title" :visible.sync="visible" width="720px" @closed="closed(2)">
        <p>弹窗内容</p>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            visible: false,
            title: '默认标题'  // 这里可以设置需要在弹窗展示的字段
            ...
        }
    },
    methods: {
        closed(val) {  // 关闭弹窗，回调函数
            this.callback && this.callback(val)
        }
    }
}
</script>

下面内容需要了解一个属性：Vue.extend,想认真了解的可以参考下面链接
Vue.extend 看完这篇，你就学废了。Vue.extend(options):基础Vue构造器参数是一个包含组件 - 掘金

第二步，在你公共js文件中创建关于弹窗的方法
import Dialog from '../../components/elDialog.vue';  // 引入文件
import Vue from 'vue'

const errorDialog = (options = {}) => {
    const Dialogs = Vue.extend(Dialog);
    let data = {}, methods = {};
    Object.keys(options).forEach(e => {
        if (typeof options[e] === 'function') {  // 判断是不是方法
            methods[e] = options[e]
        } else {
            data[e] = options[e]
        }
    })
    console.log(data,methods);
    let instance = new Dialogs({
        data: data,
        methods: methods
    })

    document.body.appendChild(instance.$mount().$el);  // 在body中追加元素
}

export default errorDialog

main.js

import elDialogs from './common/js/commonExt';
Vue.prototype.$elDialogs = elDialogs // 注册

index.vue  在需要使用弹窗的地方使用
this.$elDialogs({
      visible: true,
        title: '温馨提示', // 需要展示别的内容在封装组件中追加，往下添加即可
        callback: val => {
       console.log(val,666);
  })

感谢！