安装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>
对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 = () => {
let divElement = document.getElementById('copyText');
let pElements = divElement.getElementsByTagName('p');
let 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>