u-modal slot 的使用

u-modal 是一款 Vue 组件库中用于创建模态对话框的组件，它支持自定义内容插入到不同的部分，即所谓的“slot”。`slot` 是 HTML 中的一个特性，允许你在组件内部定义区域，外部可以传入内容替换这些区域。在 u-modal 中，常见的 slots 包括：

1. `default` 或 `template` slot: 这是默认插槽，通常用于放置模态框的基本内容，比如标题、描述或者操作按钮。

<umodal>
  <h3>这是一个自定义标题</h3>
  <p>这是模态内容...</p>
  <button @click="closeModal">关闭</button>
</umodal>

2. `header` slot: 专门用于添加头部信息，例如头像、关闭按钮等。

<umodal>
  <umodal-header>
    <img src="avatar.jpg" alt="用户头像">
    <button slot="close">关闭</button>
  </umodal-header>
  <div slot="default">这里是主要内容...</div>
</umodal>

3. `footer` slot: 插入底部的内容，如确认按钮或其他操作。

<umodal>
  <umodal-footer>
    <button type="submit" @click="confirmAction">确定</button>
    <button @click="cancel">取消</button>
  </umodal-footer>
</umodal>

使用这些 slots 可以让你的模态对话框更灵活地定制样式和功能。记得在调用 u-modal 组件时，通过 props 控制 modals 是否显示以及如何显示。