闲言少叙，直切正题。因为我喜欢命令式弹窗，所以就封装了它做为了业务代码的插件！如今在实际项目中跑了大半年，挺方便也挺灵活的！

如何使用

js
 代码解读
复制代码
// vue2
npm install @e-dialog/v2

// main.js 入口文件
import Vue from 'vue'
import App from './App'

//导包
import eDialog from '@e-dialog/v2'
//注册插件
Vue.use(eDialog, {
 width:'50%',//全局配置
 top:'15vh',
 //...省略
})

new Vue({
  el: '#app',
  render: h => h(App)
})

js
 代码解读
复制代码
// vue3
npm install @e-dialog/v3

// main.js 入口文件
import { createApp } from 'vue'
import App from './App.vue'
//导包
import eDialog from '@e-dialog/v3'

// 创建实例
const setupAll = async () => {
  const app = createApp(App)
  app.use(eDialog,{
     width:'50%',//全局配置
     top:'15vh',
     //...省略
  })
  app.mount('#app')
}

setupAll()

插件简介

vue2是基于element ui elDialog组件做的二次封装，vue3则是基于element-plus elDialog组件做的二次封装，属性配置这一块可以全部参考element UI文档！

页面使用：vue2

js
 代码解读
复制代码
// index.vue


<script>
//弹窗内容
import Edit form './edit.vue'
export default {
  methods: {
    handleDialog() { 
      /**
        * @function $Dialog是一个全局方法，自动挂载到了vue的原型
        * @description 它总共接收4个参数
        * @param 组件实例 | html字符串 
        * @param props要传递到组件的参数对象。
        * @param 点击确定按钮的回调，回调里面的第一个参数是弹窗内容的组件实例，第二个参数是关闭弹窗的执行函数
        * @param 配置对象，可以覆盖全局的配置
        * @return void
        */

      this.$Dialog(Edit, props,function(vm,next){
          //vm可以通过vm.formData拿到数据
      },{
          //配置对象
      })
    }
  
  }
}
script>

//edit.vue
<template>
  <div>弹窗内容！div>
template>

<script>
export default {
  props:[/*这里可以接收$Dialog第二个参数props的数据*/]
  data() {
    return {
        formData:{
            a:'',
            b:'',
            c:''
        }
    }
  },
 
}
script>

页面使用：vue3

js
 代码解读
复制代码
// index.vue


<script setup>
//弹窗内容
import Edit form './edit.vue'
const { proxy } = getCurrentInstance();
const $Dialog = proxy.useDialog()

function handleDialog() {
      /**
        * @function $Dialog是一个全局方法，自动挂载到了vue的原型
        * @description 它总共接收4个参数
        * @param 组件实例 | html字符串 
        * @param props要传递到组件的参数对象。
        * @param 点击确定按钮的回调，回调里面的第一个参数是弹窗内容的组件实例，第二个参数是关闭弹窗的执行函数
        * @param 配置对象，可以覆盖全局的配置
        * @return void
        */

      $Dialog(Edit, props,function(vm,next){
          //vm可以通过vm.formData拿到数据
      },{
          //配置对象
      })
    }
script>

//edit.vue
<template>
  <div>弹窗内容！div>
template>
<script setup>
const formData = reactive({
     a:'',
     b:'',
     c:''
})
defineExpose({ formData }) //这里注意一点要把外部要用的抛出去，如果不抛，则$Dialog回调将拿不到任何数据
script>

函数参数设计理念

1. 如果你弹窗内容比较复杂，例如涉及一些表单操作。最好建议抽离成一个组件，导入到Dialog第一个入参里面，如果只是简单的静态文本，则直接可以传HTML。
2. 如果你Dialog导入的是组件，那么你有可能需要给组件传参。所以Dialog第二个入参就是给你开放的入口。
3. 如果你点击确认按钮可能需要执行一些逻辑，例如调用API接口。所以你可能在Dialog第三个回调函数里面写入逻辑。回调函数会把第一个入参组件的实例给你传递回来，你拿到实例就可以干任何事情咯！
4. Dialog第四个参数考虑到不同页面的配置不同。可以灵活设置。

vue2源码地址(github.com/zy1992829/e…)

vue3源码地址(github.com/zy1992829/e…)

喜欢的朋友可以去看一看，顺便帮忙点个星星。这个就不贴源码了。。