JS实现复制功能

一、原始的复制方法，使用document.execCommand

直接上代码：

//参数content为被被复制的内容
const content="我是被复制的内容";//input模式，忽略文本格式
//多行文本可以使用模板字符串
const content=`我是多行文本，保留换行格式
地址：xxx
电话：xxx
`

copy(content) {
        // 创建输入框元素
        const input = document.createElement('input');//不会保留文本格式
        //如果要保留文本格式，比如保留换行符，或者多行文本，可以使用  textarea 标签，再配和模板字符串 ` `
        //const input = document.createElement('textarea')
        // 将想要复制的值
        input.value = content;
        // 页面底部追加输入框
        document.body.appendChild(input);
        // 选中输入框
        input.select();
        // 执行浏览器复制命令
        document.execCommand('Copy');
        // 弹出复制成功信息
        //this.$message.success('复制成功');
        // 复制后移除输入框
        input.remove();
    }

注意：
当创建不同元素时，取值有所不同，比如创建span元素是这样的

const element= document.createElement('span');
element.textContent = value; //给span元素赋值
element.innerText=value;//也是赋值

小插曲textContent和innerText属性的区别

 - textContent 会获取style= “display:none” 中的文本，而innerText不会 
 - textContent 会获取style标签里面的文本，而innerText不会
 - textContent不会理会html格式，直接输出不换行的文本 
 - innerText会根据标签里面的元素独立一行
 - innerText 对IE的兼容性较好 
 - textContent虽然作为标准方法但是只支持IE8+以上的浏览器 

二、复制不成功的情况：

有一次使用复制功能的文本是需要请求后端接口，然后复制请求回来的数据，但我在用QQ浏览器测试怎么也无法复制，
后来查了很多资料才知道 js在ajax中执行剪切板操作会有问题，复制操作在chrome浏览器是正常的，在QQ浏览器上复制不成功
发现在QQ浏览器下document.execCommand('copy')返回值都为false
document.execCommand()这个api只能在真正的用户操作之后才能被触发，是为了安全考虑。原理大致是这样的，当用户操作之后，chrome会将当前作用域下的userAction变量置为True，然后执行execCommand时就会去读取这个变量，当为True的时候才可以执行。而ajax是因为ajax基本都是异步请求，而异步请求不同于同步请求的地方就在于重新创建了一个作用域去执行回调函数。所以在重新创建一个作用域之后，之前作用域内的userAction就失效了，当前作用域下的userAction为false，所以复制不成功。
但是结合我们的场景，上面的说法也不是绝对的，毕竟在有些浏览器下也是没问题的。
最后可以总结：
由于浏览器实现不同，document.execCommand()在某些浏览器下不支持异步操作。

三、支持异步的剪切板 Navigator.clipboard

Navigator.clipboard 返回一个可以读写剪切板内容的 Clipboard 对象。在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。

    //在剪切板中写入要复制的值value，复制的也是带文本格式的，包含换行等
    navigator.clipboard.writeText(value);

    //还可以写回调函数
    navigator.clipboard.writeText(value).then(() => {
      this.$Message.success('复制成功');
    });

在MDN文档中显示 document.execCommand 已弃用
所以直接使用最新的 Navigator.clipboard 显得简单方便了。