最近，有個朋友，想通過封裝element-ui組件彈窗在js文件中通過狀態(tài)控制達到彈出效果，為此，我也查到了相關(guān)文章：vue中如何用純js調(diào)用組件_vue在js文件中使用vue組件-CSDN博客
這里我就寫一下我通過上述文章封裝el-dialog彈窗的過程。

第一步，封裝一個組件文件-elDialog.vue
<template>
    <el-dialog :title="title" :visible.sync="visible" width="720px" @closed="closed(2)">
        <p>彈窗內(nèi)容</p>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            visible: false,
            title: '默認標題'  // 這里可以設(shè)置需要在彈窗展示的字段
            ...
        }
    },
    methods: {
        closed(val) {  // 關(guān)閉彈窗，回調(diào)函數(shù)
            this.callback && this.callback(val)
        }
    }
}
</script>

下面內(nèi)容需要了解一個屬性：Vue.extend,想認真了解的可以參考下面鏈接
Vue.extend 看完這篇，你就學(xué)廢了。Vue.extend(options):基礎(chǔ)Vue構(gòu)造器參數(shù)是一個包含組件 - 掘金

第二步，在你公共js文件中創(chuàng)建關(guān)于彈窗的方法
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: '溫馨提示', // 需要展示別的內(nèi)容在封裝組件中追加，往下添加即可
        callback: val => {
       console.log(val,666);
  })

感謝！