Bootstrap

android端复制不生效问题

踩坑一

一直以来都是使用vue的第三方插件来处理复制功能,@vue/use 但是android机不兼容。于是找了以下方式,可以兼容安卓。

const copyToClipboard= (textToCopy)=>{
    if(document.execCommand('copy')) {
        // 创建textarea
        var textArea = document.createElement("textarea");
        textArea.value = textToCopy;
        // 使textarea不在viewport,同时设置不可见
        textArea.style.position = "fixed";
        textArea.style.opacity = 0;
        textArea.style.left = "-999999px";
        textArea.style.top = "-999999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        return new Promise((res, rej) => {
          // 执行复制命令并移除文本框
          document.execCommand('copy') ? res() : rej();
          textArea.remove();
        });
      } else if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
        // navigator clipboard 向剪贴板写文本
        return navigator.clipboard.writeText(textToCopy);
      }
   
}


//使用
copyToClipboard('要复制的内容').then(()=>{
    Toast.success('已复制')
   }).catch(error=>{
    Toast.error('复制失败')
   })
;