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

HTML部分：

<a-button type="primary" @click="showModel">打开弹框
</a-button><!-- @ok 是弹框中确定按钮的操作，@cancel 是弹框中取消按钮的操作 -->
<a-modaltitle="内容如下":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-modaltitle="内容如下":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-modaltitle="内容如下":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>