弹窗组件封装

一、使用方便，可分发内容

1.绑定visible属性后，弹窗可自我关闭

（1）通过v-model:visible给弹框组件绑定属性

（2）组件内创建一个变量，用于弹框显示。初始值为父组件传递的prop中的visible。

（3）监听prop 的visible，改变dialogVisible的值。

（4）监听dialogVisible，触发update:visible事件，传递dialogVisible的值

2.提供默认和底部插槽，用于渲染其他视图

（1）提供默认插槽，显示内容

（2）提供footer插槽，显示底部操作区域

    <el-dialog v-bind="$attrs" v-model="dialogVisible">
      <slot></slot>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-dialog>

watch(
  () => props.visible,
  () => {
    dialogVisible.value = props.visible;
  }
);
const emits = defineEmits(["update:visible"]);
watch(dialogVisible, (val) => {
  emits("update:visible", val);
});