安装clipboard包
npm install vue3-clipboard
在main.js中进行配置
import VueClipboard from 'vue3-clipboard'
const app = createApp(App)
use(VueClipboard, {
autoSetContainer: true,
appendToBody: true,
}).mount('#app')
代码实现
<template>
<div style="width: 50%;">
<el-button type="primary" @click="handleCopy">复制文本</el-button>
<el-input v-model="textarea" type="textarea"/>
</div>
</template>
<script setup>
import {copyText} from 'vue3-clipboard'
import {ElMessage} from 'element-plus'
import {ref} from 'vue'
const textarea = ref('')
const handleCopy = () => {
if (textarea.value === '') {
ElMessage.warning('请输入文本再复制');
return
}
copyText(textarea.value, undefined, (error) => {
if (error) {
ElMessage.error(`复制失败: ${error} !`);
} else {
ElMessage.success(`复制: ${ textarea.value } 成功!`);
}
});
}
</script>
![](https://img2023.cnblogs.com/blog/3049770/202308/3049770-20230816110932142-1889635156.png)
对element plus中的el-card中的内容进行复制
<template>
<el-card class="box-card" v-show="detailActiveIndex==='7'">
<template #header>
<div class="card-header">
<el-button class="button" text @click="copyToClipboard">点我复制</el-button>
</div>
</template>
<div id="copyText">
<p>我是复制内容1</p>
<p>我是复制内容2</p>
<p>我是复制内容3</p>
<p>我是复制内容4</p>
<p>我是复制内容5</p>
</div>
</el-card>
</template>
<script setup>
import {copyText} from 'vue3-clipboard'
import {ElMessage} from 'element-plus'
const copyToClipboard = () => {
// 获取包含文本的 div 元素
let divElement = document.getElementById('copyText');
// 获取 div 元素下所有的p标签
let pElements = divElement.getElementsByTagName('p');
// 存储文本内容的数组
let textContents = [];
// 遍历所有的 p 元素,将文本内容存储在 textContents 数组中
for (let i = 0; i < pElements.length; i++) {
let pElement = pElements[i];
let textContent = pElement.textContent || pElement.innerText;
textContents.push(textContent);
}
// 检查文本内容是否为空
if (textContents === '') {
ElMessage.warning('请输入文本再复制');
return
}
// 将文本内容连接为带有换行符的字符串
let joinedText = textContents.join('\n');
// 复制文本到剪贴板
copyText(joinedText, undefined, (error) => {
if (error) {
ElMessage.error(`复制失败: ${error} !`);
} else {
ElMessage.success(`复制成功!`);
}
});
}
</script>
![](https://img2023.cnblogs.com/blog/3049770/202308/3049770-20230816110907952-1573309598.png)