antdesignvue的model框 只要点击model框以外的地方model也就会关闭 怎么解决这个问题 让他只在点击关闭按钮的时候才会关闭 请结合ant官方文档 解决这个问题 具体实现方法

在Ant Design Vue (ADVue) 中，`Modal`(对话框) 的默认行为是当你点击其外部区域时会自动关闭。如果你希望用户只能通过点击确定或取消按钮来关闭模型框，可以参考以下步骤：

首先，确保你已经安装了 `@ant-design/icons` 库，因为关闭模态通常会用到 "关闭" 图标：

npm install @ant-design/icons

然后，在你的组件中，你可以这样控制 Modal 的关闭行为：

<template>
  <a-modal :visible.sync="modalVisible" closable={false} :footer="{ okText: '确认', cancelText: '取消' }">
    <!-- 模型内容 -->
    ...
  </a-modal>
</template>

<script>
import { Modal } from '@ant-design/vue';
import CloseIcon from '@ant-design/icons/CrossOutlined';

export default {
  components: {
    Modal,
    CloseIcon,
  },
  data() {
    return {
      modalVisible: false, // 初始化模态是否显示
    };
  },
  methods: {
    onClose() {
      this.modalVisible = false; // 当点击关闭图标时调用这个方法来关闭模态
    },
  },
  mounted() {
    document.addEventListener('click', this.handleOutsideClick);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleOutsideClick);
  },
  // 监听外层元素的点击事件
  handleOutsideClick(e) {
    if (!this.$refs.modal || !this.$refs.modal.contains(e.target)) {
      // 如果点击点不在模态框内，则关闭模态
      this.onClose();
    }
  },
};
</script>

在这个例子中，我们禁用了默认的关闭功能（`closable={false}`），并将关闭操作绑定到了 `onClose` 方法上。当点击关闭图标时，`onClose` 方法会被调用，从而关闭 Modal。