使用Javascript实现复制粘贴功能的示例代码

handleCopy() {
  let copy_text = '需要复制的内容';//拿到想要复制的值
  let input_dom = document.createElement('input');//创建input元素
  input_dom.value = copy_text;//添加需要复制的内容到value属性
  document.body.appendChild(input_dom);//向页面底部追加输入框
  input_dom.select();//选择input元素
  document.execCommand("Copy");//执行复制命令
  alert("复制成功！");//弹出提示信息，不同组件可能存在写法不同
  //复制之后再删除元素，否则无法成功赋值
  input_dom.remove();//删除动态创建的节点
},

handleCopy() {
  let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
  let textarea_dom = document.createElement('textarea');//创建textarea元素
  document.body.appendChild(textarea_dom);//向页面底部追加输入框
  textarea_dom.value = copy_text; //添加需要复制的内容到value属性
  textarea_dom.select();//选择input元素
  document.execCommand("Copy");//执行复制命令
  alert("复制成功！");//弹出提示信息，不同组件可能存在写法不同
  //复制之后再删除元素，否则无法成功赋值
  document.body.removeChild(textarea_dom); //删除动态创建的节点
}

handleCopy() {
  let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
  // 使用Clipboard API复制文本到剪贴板中
  navigator.clipboard.writeText(copy_text).then(() => {
    alert("复制成功！")
  }).catch((err)=>{
    alert("复制失败！")
  })
}

npm install clipboard --save

import Clipboard from 'clipboard'

<template>
	<div>
    <div class="copy_dom" @click="handleCopy"></div>
  </div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
  data: {
    clipboard: null
  }
  methods: {
  	handleCopy() {
      // 传递事件绑定的元素class名和需要复制的内容text，创建Clipboard实例 
	  this.clipboard = new Clipboard('.copy_dom', {
        text: () => {
          return '第一行需要复制的内容\r\n第二行需要复制的内容'
        }
      });
      // 复制成功后的回调函数
      this.clipboard.on('success', () => {
        // 释放内存，非常重要，不然会重复触发回调函数
		this.clipboard.destroy();
        console.log('复制成功！');
      })
     	// 复制失败后的回调函数
      this.clipboard.on('error', function(e) {
        console.log('复制失败！');
      })
		}
  },
  //beforeDestroy() {
  //  this.clipboard.destroy(); //组件页面销毁时，需要手动清理clipboard，释放内存
  //}
}
</script>