vue3 使用clipboard实现一键复制

安装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 = () => {
  // 获取包含文本的 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>