封装 el-dialog

封装el-dialog组件的目的是为了在多个地方重复使用弹窗功能。通过封装可以实现组件间的数据通信和逻辑复用。在具体的封装中，可以使用.sync修饰符来监听属性的变化并同步通知到父组件。如果不使用.sync修饰符，需要手动绑定一个方法来监听属性变化并手动更新组件。

在父组件中，可以使用以下代码来使用封装的card-dialog组件：
<card-dialog :visible.sync="visible"></card-dialog>

card-dialog组件内部的代码如下：
<template>
<div>
<el-dialog title="开卡设置" :visible.sync="openCardDialog">
</el-dialog>
</div>
</template>

<script>
export default {
props: {
visible: { type: Boolean, default: false }
},
computed: {
openCardDialog: {
get() {
return this.visible
},
set(val) {
console.log(val)
this.$emit('update:visible', val)
}
}
}
}
</script>

在popup.vue文件中，也可以封装el-dialog组件，代码如下：
<template>
<div>
<el-dialog :visible.sync="dialogVisible" width="70%">
<div class="center">
<p>my name is popup</p>
</div>
</el-dialog>
</div>
</template>

<script>
export default {
props: {
visible: { type: Boolean, default: false },
objectData: { type: Object, default: () => {} }
},
computed: {
dialogVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('updateVisible', val)
}
}
},
created() {
console.log(this.objectData)
}
}
</script>

以上是关于封装el-dialog组件的示例代码，通过封装可以提高代码的复用性和可维护性。