Vue3 Modal 弹窗：命令式与 Hooks 的使用方式

2024-01-01 12:57:20

如何使用 Ant-Design-Vue Modal 组件：命令式和 Hooks 指南

概述

在 Vue.js 应用中，Modal 组件是一个不可或缺的元素，它可以轻松创建各种弹出窗口，如登录窗口、注册窗口和信息提示框。Ant-Design-Vue 是一个流行的 Vue 组件库，它提供了丰富的 Modal 组件，并支持命令式和 Hooks 两种使用方式。

命令式使用方式

命令式使用方式是传统的方法，涉及使用 ref 指令获取 Modal 实例，然后通过调用该实例的方法来控制弹窗的显示和隐藏。

代码示例：

<template>
  <a-button @click="showModal">打开弹窗</a-button>
  <a-modal
    ref="modal"
    title="这是一个弹窗"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>这是一个弹窗的内容。</p>
  </a-modal>
</template>

<script>
import { ref } from 'vue';
import { Modal } from 'ant-design-vue';

export default {
  setup() {
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      visible.value = false;
    };

    const handleCancel = () => {
      visible.value = false;
    };

    return {
      visible,
      showModal,
      handleOk,
      handleCancel,
    };
  },
};
</script>

Hooks 使用方式

Hooks 是 Vue 3 引入的一种新型 API，它简化了组件的编写。Ant-Design-Vue 也支持 Hooks 使用方式，允许您通过 useModal 钩子函数创建 Modal。

代码示例：

<template>
  <a-button @click="showModal">打开弹窗</a-button>
  <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel">
    <p>这是一个弹窗的内容。</p>
  </a-modal>
</template>

<script>
import { useModal } from 'ant-design-vue';

export default {
  setup() {
    const { visible, showModal, handleOk, handleCancel } = useModal();

    return {
      visible,
      showModal,
      handleOk,
      handleCancel,
    };
  },
};
</script>