el-dialog组件大家都用过，一般情况下当el-dialog组件中的内容比较多的时候还是建议把弹窗内容单独放在一个文件，使代码整洁方便维护。
el-dialog组件中有一个visible属性用于组件的显示与隐藏，想要单独封装就需要把visible属性渗透到外层，这其中就涉及到父子组件的互相传值与修改。
创建MyDialog组件
<template>
<el-dialog
class="my-dialog"
width="70%"
:visible.sync="dialogVisible"
>
<div>dialog内容区域</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'MyDialog',
props: {
show: {
type: Boolean,
default: false
}
},
computed: {
dialogVisible: {
get() {
return this.show
},
set(val) {
this.$emit('update:show', val)
}
}
}
}
</script>
这里主要是用了vue中.sync和计算属性的get和set方法的使用。
通过对MyDialog组件传入show字段控制显示与隐藏，将show的值与el-dialog的visible值同步，当点击关闭弹窗时visible变false，通过this.$emit('update:show', val)方法修改show的值为false。
使用MyDialog组件
<template>
<el-button @click="showMyDialog = !showMyDialog">打开/关闭MyDialog</el-button>
<MyDialog :show.sync="showMyDialog"></MyDialog>
</template>
<script>
data() {
return {
showMyDialog: false
}
}
</script>
