Vue3+Antd实现弹框显示内容并加入复制按钮
作者：依稀i123
这篇文章主要介绍了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>到此这篇关于Vue3+Antd实现弹框显示内容并加入复制按钮的文章就介绍到这了,更多相关Vue3 Antd弹框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！