一、vue2.0
<template>
<div class="na-dialog">
<el-dialog :title="datas.title" v-model="innerVisible" :width="datas.width" @close="btnClick(datas.close)"
@opened="btnClick(datas.open)">
<slot></slot>
<template #footer>
<span class="dialog-footer">
<el-button @click="innerVisible = false" size="small">取消</el-button>
<template v-for="item in datas.btns">
<el-button type="primary" @click="btnClick(item.methods)" size="small">{{ item.label }}</el-button>
</template>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
visible: { //绑定显隐的字段
type: Boolean,
default: false
},
datas: {
type: Object,
default: { //弹窗数据
title: '弹窗名称', //弹窗名称
width: '70%', //弹窗宽度
close: 'closeDialog', //弹窗关闭后调用
btns: [ //按钮-取消不需要
{
label: '保存',
methods: 'save'
}
]
}
}
},
computed: {
innerVisible: {
get() {
return this.visible
},
set(val) {
debugger
this.$emit('update:visible', val)
}
},
},
methods: {
btnClick(key) {
if (key) {
this.$nextTick(() => {
this.$parent[key]();
})
}
},
},
}
</script>
<style lang="scss" scoped>
.na-dialog {
:deep(.el-dialog) {
.el-dialog__body {
padding: 0 !important;
height: calc(100% - 90px);
}
}
}
</style>
<na-dialog :visible.sync="visible" :data="dialog"></na-dialog>
父组件需要加入closeDialog方法、save方法
二、vue3.0弹窗封装
<template>
<div class="na-dialog">
<el-dialog :title="datas.title" v-model="innerVisible" :width="datas.width"
@close="btnClick(datas.close)" @opened="btnClick(datas.open)">
<slot></slot>
<template #footer>
<span class="dialog-footer">
<el-button @click="innerVisible= false" size="small">取消</el-button>
<template v-for="item in datas.btns">
<el-button type="primary" @click="btnClick(item.methods)" size="small">{{ item.label }}</el-button>
</template>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import {
reactive,
toRefs,
computed,
getCurrentInstance,
nextTick,
} from "vue";
export default {
props: {
visible: {//绑定显隐的字段
type: Boolean,
default: false
},
datas: {
type: Object,
default: {//弹窗数据
title: '弹窗名称',//弹窗名称
width: '70%', //弹窗宽度
close: 'closeDialog', //弹窗关闭后调用
btns: [ //按钮-取消不需要
{
label: '保存',
methods: 'save'
}
]
}
}
},
setup(props, context) {
const state = reactive({});
const instance = getCurrentInstance();
const {
proxy
} = instance;
const {
visible
} = toRefs(props);
let innerVisible = computed({
get: () => visible.value,
set: (val) => {
context.emit("update:visible", val);
},
})
//按钮按下
const btnClick = (key) => {
if (key) {
nextTick(()=>{
proxy.$parent[key]();
})
}
}
return {
...toRefs(state),
innerVisible,
btnClick
};
}
}
</script>
<style lang="scss" scoped>
.na-dialog {
:deep(.el-dialog) {
.el-dialog__body {
padding: 0 !important;
height: calc(100% - 90px);
}
}
}
</style>
<na-dialog v-model:visible="dialog.visible" :data="dialog"></na-dialog>
引入没什么不同,只是参数有一点区别,一个是参数后加.sync一个是参数前加v-model: