在 Ant Design Vue 的 Modal 示例中汲取的 4 个知识点

1. 插槽：灵活扩展 Modal 内容

插槽是 Vue 提供的一种机制，它允许我们在组件内部定义占位符，以便在使用该组件时可以注入自定义内容。在 Modal 示例中，我们可以通过插槽向 Modal 中添加标题、内容和页脚。

例如，以下代码定义了一个带标题和页脚的 Modal：

<template>
  <a-modal :title="title" :footer="footer">
    <p>这是 Modal 内容。</p>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      title: '我的 Modal 标题',
      footer: '我的 Modal 页脚'
    }
  }
}
</script>

2. 渲染函数：动态控制 Modal 渲染

渲染函数是一种在 Vue 中创建组件的一种替代方式。它提供了一种更灵活的方式来控制组件的渲染输出。在 Modal 示例中，我们可以使用渲染函数来动态控制 Modal 的标题和内容。

例如，以下代码使用渲染函数创建了一个动态标题和内容的 Modal：

<template>
  <a-modal>
    <template #title>
      <h1>{{ dynamicTitle }}</h1>
    </template>
    <template #content>
      <p>{{ dynamicContent }}</p>
    </template>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      dynamicTitle: '动态标题',
      dynamicContent: '动态内容'
    }
  }
}
</script>

3. JSX：简洁高效的语法糖

JSX 是 JavaScript 的一种语法扩展，它允许我们在 JavaScript 代码中编写类似 HTML 的代码。在 Modal 示例中，我们可以使用 JSX 来简化插槽和渲染函数的编写。

例如，以下代码使用 JSX 重写了前面使用渲染函数创建的 Modal：

<template>
  <a-modal>
    <template #title>
      <h1>{dynamicTitle}</h1>
    </template>
    <template #content>
      <p>{dynamicContent}</p>
    </template>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      dynamicTitle: '动态标题',
      dynamicContent: '动态内容'
    }
  }
}
</script>

4. 组件与函数调用：灵活使用 Modal

Ant Design Vue 的 Modal 组件提供了两种使用方式：组件调用和函数调用。组件调用是一种更传统的方式，而函数调用则提供了更多灵活性。

组件调用

组件调用通过将 Modal 组件直接添加到 Vue 模板中来使用 Modal。以下代码展示了如何使用组件调用：

<template>
  <a-modal :title="title"></a-modal>
</template>

<script>
export default {
  data() {
    return {
      title: '我的 Modal'
    }
  }
}
</script>

函数调用

函数调用通过调用 Modal.info、Modal.success 等函数来使用 Modal。这些函数返回一个 Promise，可以用来获取 Modal 的结果。以下代码展示了如何使用函数调用：

Modal.info({
  title: '我的 Modal',
  content: '这是 Modal 内容',
  onOk() {
    console.log('Modal 已确认');
  }
});

总结

通过学习 Ant Design Vue 的 Modal 示例，我们深入了解了 Vue 中插槽、渲染函数和 JSX 的应用，掌握了 Modal 组件和函数调用两种使用方式，并探索了如何通过 CSS 样式对 Modal 进行自定义。这些知识点对于构建交互式且可定制的 Vue 应用程序至关重要。