马上2025年了，你还在用组件式弹窗? 来看看这个吧~
闲言少叙，直切正题。因为我喜欢命令式弹窗，所以就封装了它做为了业务代码的插件！如今在实际项目中跑了大半年，挺方便也挺灵活的！
如何使用
// 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)
})
// 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文档！
扩展的属性配置
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isBtn | 是否显示底部操作按钮 | boolean | true |
| draggable | 是否开启拖拽，vue3版本element-plus内置了该属性 | boolean | true |
| floorBtnSize | 底部操作按钮的尺寸 | medium、small、mini | small |
| sureBtnText | 确定按钮的文案 | string | 确定 |
| closeBtnText | 关闭按钮的文案 | string | 关闭 |
| footer | 底部按钮的插槽，是一个函数返回值必须是JSX | function | - |
底部插槽用法
// index.vue
<template>
<!-- vue2示例 -->
<div>
<el-button @click="handleDialog">弹窗</el-button>
</div>
</template>
<script>
//弹窗内容
import Edit form './edit.vue'
export default {
methods: {
handleDialog() {
this.$Dialog(Edit, props,function(vm,next){
//vm可以通过vm.formData拿到数据
},{
isBtn:false //如果定义了插槽，建议关闭底部操作按钮，不然会出现布局问题
footer:function(h,next){
return (
<el-button onClick={()=>{this.handleCheck(next)}}>按钮</el-button>
)
}
})
},
//按钮点击触发
handleCheck(next){
//next是一个手动关闭函数
console.log('业务逻辑')
}
}
}
</script>
页面使用：vue2
// index.vue
<template>
<!-- vue2示例 -->
<div>
<el-button @click="handleDialog">弹窗</el-button>
</div>
</template>
<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
// index.vue
<template>
<!-- vue2示例 -->
<div>
<el-button @click="handleDialog">弹窗</el-button>
</div>
</template>
<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>
函数参数设计理念
- 如果你弹窗内容比较复杂，例如涉及一些表单操作。最好建议抽离成一个组件，导入到Dialog第一个入参里面，如果只是简单的静态文本，则直接可以传HTML。
- 如果你Dialog导入的是组件，那么你有可能需要给组件传参。所以Dialog第二个入参就是给你开放的入口。
- 如果你点击确认按钮可能需要执行一些逻辑，例如调用API接口。所以你可能在Dialog第三个回调函数里面写入逻辑。回调函数会把第一个入参组件的实例给你传递回来，你拿到实例就可以干任何事情咯！
- Dialog第四个参数考虑到不同页面的配置不同。可以灵活设置。
vue2源码地址(github.com/zy1992829/e…)
vue3源码地址(github.com/zy1992829/e…)
喜欢的朋友可以去看一看，顺便帮忙点个星星。这个就不贴源码了。。
作者：阳火锅
来源：juejin.cn/post/7448661024440401957
来源：juejin.cn/post/7448661024440401957
