前景:用el-dialog封装一个公共的弹窗,确认获取组件内容。
步骤一:创建modulDialog.vue文件
<template>
<el-dialog
:visible.sync="dialogVisible"
:modal-append-to-body="false"
:title="title"
:width="width"
:close-on-click-modal="false"
:custom-class="customClass"
>
<slot></slot>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'modulDialog',
props: {
value: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
width: {
type: String,
default: '50%'
},
customClass: {
type: String,
default: ''
},
},
computed: {
dialogVisible: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
},
methods: {
confirm() {
this.$emit('confirm');
}
},
beforeDestroy() {
this.dialogVisible = false;
}
};
</script>
<style scoped>
.dialog-footer {
text-align: center;
padding: 10px 0;
}
</style>
步骤二:引入modulDialog.vue(引入方式看自己,想全局和局部都行)
步骤三:使用
<modul-dialog :title="componentDialog.title" :width="componentDialog.width" v-model="componentDialog.openFalg" @confirm="confirmSummit">
<component ref="component" :is="componentDialog.modulName"/>
</modul-dialog>
import audit from '@/components/tableCommon/TableAudit.vue'
components: {
audit
},
data() {
return {
componentDialog:{
modulName:'',
title:'',
width:'',
openFalg:false
}
}
},
methods: {
this.openModulDialog('审核操作','audit','400px',true)
openModulDialog(title,modulName,width,openFalg){
this.componentDialog.title=title
this.componentDialog.modulName=modulName
this.componentDialog.width=width
this.componentDialog.openFalg=openFalg
},
confirmSummit(){
console.log('changeVerification',this.$refs.component.changeVerification())
console.log('e',this.$refs.component.form)
},
}
上图:(这样就能做到一个弹窗可切换多个组件,不需要写多个弹窗,只需要添加自己的组件就行)