使用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>