h5拷贝内容后的处理

介绍一种原生的写法，可以监听拷贝成功或者失败的状态，代码如下：

const copyContentH5 = (content) => {
  let copyDom = document.createElement('div');
  copyDom.innerText = content;
  copyDom.style.position = 'absolute';
  copyDom.style.top = '0px';
  copyDom.style.right = '-9999px';
  document.body.appendChild(copyDom);
  // 创建选中范围
  let range = document.createRange();
  range.selectNode(copyDom);
  // 移除剪切板中内容
  window.getSelection().removeAllRanges();
  // 添加新的内容到剪切板
  window.getSelection().addRange(range);
  // 复制
  let successful = document.execCommand('copy');
  copyDom.parentNode.removeChild(copyDom);
  const msg = successful ? 'successful' : 'failed';
  console.log('Copy command was : ' + msg);
  if (successful) {
    // 拷贝成功后的处理
  } else {
    // 拷贝失败后的处理
  }
}

execCommand这个api已废弃，所以可以找些替代方案

 navigator.clipboard.writeText(value).then(() => {});

也有基于三方组件的写法，但是在一些移动设备上可能会有兼容性的问题，导致无法正确的监听拷贝的真实状态，如下：

import ClipboardJS from 'clipboard'

let btn = document.getElementById('btn');
let clipboard = new ClipboardJS(btn);
clipboard.on('success', (e) => {
  message.success('复制成功')
})
clipboard.on('error', (e) => {
  console.log('复制失败')
})

h5 复制文本到剪贴板（适合移动和pc端）