antdv Modal的简单使用

简述

Ant Design Vue 的 Modal 组件是一个常用的弹窗组件，用于显示重要信息、收集用户输入或进行交互操作。

常用属性配置

1. 基础属性

   • v-model:visible: 控制弹窗显示 / 隐藏的绑定值（必填）
   • title: 弹窗标题（字符串或 VNode）
   • width: 弹窗宽度，如 500px 或 50%
   • mask: 是否显示遮罩层，默认 true
   • closable: 是否显示关闭按钮，默认 true
   • maskClosable: 点击遮罩是否可关闭弹窗，默认 true

    说明：

     closabled：对话框的右个的X

      maskClosable：点击对话框的外部，关闭对话框，其实就是点击遮罩，这个要求显示遮罩。

1. 按钮配置

   • okText: 确定按钮文本，默认 确定
   • cancelText: 取消按钮文本，默认 取消
   • showOkButton: 是否显示确定按钮，默认 true
   • showCancelButton: 是否显示取消按钮，默认 true

2. 事件

   • @ok: 点击确定按钮时触发
   • @cancel: 点击取消按钮或关闭弹窗时触发
   • @open: 弹窗打开时触发
   • @close: 弹窗关闭时触发

简单例子

<template><div><!-- 触发按钮 --><a-button type="primary" @click="visible = true">打开弹窗</a-button><!-- Modal 组件 --><a-modalv-model:visible="visible"title="基本弹窗"@ok="handleOk"@cancel="handleCancel"><p>这是弹窗的内容...</p><p>可以包含表单、文本或其他组件</p></a-modal></div>
</template><script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';// 控制弹窗显示/隐藏
const visible = ref(false);// 点击确定按钮的回调
const handleOk = () => {message.success('点击了确定');visible.value = false;
};// 点击取消按钮或关闭弹窗的回调
const handleCancel = () => {message.info('点击了取消');visible.value = false;
};
</script>

说明：这里的a-开头的，是通过全局引入后才有的。

否则直接使用大写开头的局部引用：import { Modal } from 'ant-design-vue';

Modal提示框

import { Modal } from 'ant-design-vue';// 信息提示弹窗
Modal.info({title: '这是一条信息',content: '通过服务端方式调用的弹窗',onOk() {},
});// 成功提示弹窗
Modal.success({title: '操作成功',content: '您的操作已完成',
});
// 确认弹窗
Modal.confirm({title: '提示',content:'这是一个确认弹窗',onCancel() {},onOk() {},title,});

对话框的使用简单而且有用，有兴趣可以试一下。