Clipboard.js封装和异步数据结合使用

Clipboard.js使用在异步数据中时，一般需要额外的目标元素存储复制文本，使用比较繁琐，可以动态生成元素，在复制完成后，移除元素就可

安装clipboardjs

npm install clipboard --save

封装copyText2Clipboard函数 主要是为了方便使用

import Clipboard from "clipboard"
/**
 * @description 复制到剪切板
 * @param {Object} options 配置项
 */
export function copyText2Clipboard({ copyText = '', onSuccess = null, onError = null}) {
  console.log('handleCopy2', copyText);
  const targetEle = document.createElement('span');
  targetEle.setAttribute('id', 'copy-target-ele');
  // 设置复制内容
  targetEle.setAttribute('data-clipboard-text', copyText);
  // 元素插入到body中
  targetEle.style.cssText = 'opacity: 0; position: absolute; left: -3000px;';
  document.body.appendChild(targetEle)

  targetEle.addEventListener('click', (event) => {
    copyText2Clip(event)
  });
  targetEle.click()

  // 销毁元素
  function removeCopyTargetEle() {
    document.body.removeChild(targetEle)
  }
  function copyText2Clip(event) {
    const clipboard = new Clipboard(event.target)
    // //复制成功
    clipboard.on('success',res => {
      clipboard.destroy();  //及时销毁
      removeCopyTargetEle()
      if(onSuccess) {
        onSuccess()
      }
    })
    //复制失败，不支持复制
    clipboard.on('error',res => {
      clipboard.destroy()
      removeCopyTargetEle()
      if(onError) {
        onError()
      }
    })
    clipboard.onClick(event)  //解决第一次不触发问题
  }
}

使用：

import { copyText2Clipboard } from '@/utils/copy2ClipboardHelper';
  methods: {
    generateCopyData() {
      const assetCodeList = this.selectList.map(item => item.assetCode)
      this.submitLoading = true
      queryWindtypeAndResearch(assetCodeList)
        .then(res => {
          const copyList = res.data.body || []
          console.log('copyList结果', copyList)
          copyList.forEach(item => {
            copyText = `${copyText}`+`\n`+
                      `${item.assetCode} ${item.assetName} ${item.assetType} ${item.researcher}`
          })
          copyText2Clipboard({
            copyText,
            onSuccess: () => {
              this.$message.success('复制成功')
              this.clearSelection()
            },
            onError: () => {
              this.$message.error('复制失败，该浏览器不支持自动复制')
            }
          })
        })
    }
}