ant-design vue 弹出

Ant Design Vue 提供了一个名为 `Modal` 的组件，用于在Vue应用中创建弹出窗口或对话框。它是一个非常实用的功能，常用于显示警告、确认信息、数据编辑等场景。`Modal`组件通常包含以下部分：

1. **打开弹窗**：你可以通过调用 `this.$antModal.info()` 或者 `this.$antModal.confirm()` 等方法来开启不同类型的消息提示。

2. **内容区域**：提供一个自定义的 HTML 或者 VNode 来展示你需要用户关注的信息。

3. **操作按钮**：可以设置默认的 "确定" 和 "取消" 按钮，也可以自定义其他按钮。

4. **配置选项**：如标题、是否允许关闭、动画效果、遮罩层透明度等，可以根据需要进行调整。

<template>
  <button @click="showModal">点击弹出</button>
  <a-modal v-model="modalVisible">
    <div slot="title">提示信息</div>
    <p>这是弹出的内容...</p>
    <a-button type="primary" @click="handleOk">确定</a-button>
    <a-button @click="handleCancel">取消</a-button>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false,
    };
  },
  methods: {
    showModal() {
      this.modalVisible = true;
    },
    handleOk() {
      // 用户点击确定后的处理
      this.modalVisible = false;
    },
    handleCancel() {
      // 用户点击取消后的处理
      this.modalVisible = false;
    }
  }
};
</script>