Vue3+Antd实现弹框显示内容并加入复制按钮

使用Vue3+antd实现点击弹框出现内容并可复制内容的功能：

HTML部分：

<a-button type="primary" @click="showModel">
  打开弹框
</a-button>

<!-- @ok 是弹框中确定按钮的操作，@cancel 是弹框中取消按钮的操作 -->
<a-modal
    title="内容如下"
    :visible="isModalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
>
  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>弹框内容</p>
    <a-button type="primary" @click="copyContent">复制</a-button>
  </div>
</a-modal>

JS部分：

  import {message} from "ant-design-vue";
  
  const isModalVisible = ref(false)

  // 打开弹框
  const showModel = () => {
    isModalVisible.value = true
  }
  // 弹框中取消按钮
  const handleCancel = () => {
    isModalVisible.value = false;
  }
  // 弹框中复制按钮
  const copyContent = () => {
    const textToCopy = '弹框内容';    // 弹框内容，即<p>中的内容
    navigator.clipboard.writeText(textToCopy).then(() => {
      message.success("复制成功")
      console.log('Text copied to clipboard');
    }).catch((err) => {
      message.warning("复制失败")
      console.error('Unable to copy text to clipboard', err);
    });
  }
  // 弹框中确定按钮
  const handleOk = () => {
    isModalVisible.value = false;
  };

以上代码弹框是有两个按钮：取消、确认。

如何实现只有一个取消/确认按钮

新增：:footer="null" 即可取消掉两个按钮，但是要手动加入按钮：

<a-modal
    title="内容如下"
    :visible="isModalVisible"
    :footer="null"
>
  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>弹框内容</p>
    <a-button type="primary" @click="copyContent">复制</a-button>
  </div>
  <div align="right">
    <a-button type="default" align="right" @click="handleCancel">取消</a-button>
  </div>
</a-modal>

修改确认/取消按钮位置样式等

<a-button type="primary" @click="showModel">
  打开弹框
</a-button>

<!-- @ok 是弹框中确定按钮的操作，@cancel 是弹框中取消按钮的操作 -->
<a-modal
    title="内容如下"
    :visible="isModalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
>

  <template #okText>
    修改'确认'按钮中的文本
  </template>
  <template #cancelText>
    修改'取消'按钮中的文本
  </template>
  <template #footer>
    自定义按钮位置样式等
  </template>
  <template #closeIcon>
    修改弹框右上角'x'的样式
  </template>

  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>弹框内容</p>
    <a-button type="primary" @click="copyContent">复制</a-button>
  </div>
</a-modal>