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-modal
      v-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,
    });

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