JS复制文本方法总结

1. document.execCommand() 【即将废弃】

function copy(textValue) {
  // 动态创建 textarea 标签
  const textarea = document.createElement('textarea')
  // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
  textarea.readOnly = 'readonly'
  textarea.style.position = 'absolute'
  textarea.style.left = '-9999px'
  // 将要 copy 的值赋给 textarea 标签的 value 属性
  textarea.value = textValue
  // 将 textarea 插入到 body 中
  document.body.appendChild(textarea)
  // 选中值并复制
  textarea.select()
  const result = document.execCommand('Copy')
  if (result) {
    Vue.prototype.$message({
      message: '复制成功',
      type: 'success'
    });
  }
  document.body.removeChild(textarea)
}

2. navigator.clipboard.writeText()【微信浏览器中无效】

function copy(textValue) {
  navigator.clipboard.writeText(textValue).then(() => {
    console.log('复制成功')
  })
}

3. Vue项目：安装clipboard

npm install clipboard --save
然后，引入 clipboard
import Clipboard from 'clipboard'
对被点击的文本或按钮绑定动态变量 id="btn" :data-clipboard-text="scope.row.courseNo"

<!-- 这里scope.row.courseNo是我要复制的内容 -->
<template slot-scope="scope">
    <span id="btn" :data-clipboard-text="scope.row.courseNo" @click="copyValue()">{{ scope.row.courseNo }}</span>
 </template>

方法
copy() {
   const Message = this.$message
   var clipBoard = new Clipboard('#btn')
   clipBoard.on('success', function() {
       clipBoard.destroy() // 销毁上一次的复制内容
       clipBoard = new Clipboard('#btn')
       Message.success('复制成功')
   })
   clipBoard.on('error', function() {
       Message.info('复制失败，请手动复制')
   })
}