Antdvue中 a-modal的api

Ant Design Vue (AntdVue) 的 `a-modal` 是一个轻量级的弹窗组件，常用于创建模态框、对话框或通知。它提供了一些基本的功能，如显示和关闭模态内容，配置标题、大小、位置等。以下是 `a-modal` 主要的 API 属性和方法：

1. **props** (属性):
- `visible`: 控制模态是否可见，默认值为 `false`。布尔型，可通过 `this.$refs.modal.show()` 或者通过绑定的事件改变。
- `title`: 模态窗口的标题，字符串类型。
- `width` 和 `height`: 模态窗口的尺寸，可以设置为固定像素值或百分比。
- `center` 或 `fullscreen`: 是否居中显示或全屏模式。
- `mask`: 是否显示遮罩层，默认 true。
- `maskClosable`: 是否允许点击遮罩层关闭模态，默认 true。

2. **methods** (方法):
- `open()`: 显示模态。
- `close()`: 关闭模态。
- `onOk(event)`: 确定按钮或自定义确认操作触发的回调函数，event 参数是点击事件。
- `onCancel(event)`: 取消按钮或自定义取消操作触发的回调函数，event 参数同上。

3. **events** (事件):
- `onVisibleChange(visible)`: 当模态的可见状态变化时触发，visible 是新的可见状态。
- `onAfterClose()`: 模态关闭后触发。

要使用 `a-modal`，通常会在模板中引用组件，并通过 props 和 methods 进行配置。例如：

<template>
  <a-modal v-model="modalVisible" :title="modalTitle">
    <div slot="content">这里是模态的内容</div>
    <a-button type="primary" @click="handleOk">确定</a-button>
    <a-button type="ghost" @click="handleCancel">取消</a-button>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false,
      modalTitle: '这是一个模态'
    };
  },
  methods: {
    handleOk() {
      this.$refs.modal.close(); // 关闭模态并调用回调
    },
    handleClose() {
      this.modalVisible = false;
    }
  }
};
</script>