js 复制内容到剪贴板，解决navigator.clipboard Cannot read properties of undefined (reading ‘writeText‘）

之前写过一个文章，是实现了点击按钮实现复制功能，链接在此：https://blog.csdn.net/qq_58340302/article/details/123847964?spm=1001.2014.3001.5502

这个实现方法在本地运行的时候点儿问题都没有，但是！

但是将他拿到测试环境时，bug出现了，报错如下：

经查找资料发现是浏览器禁用了非安全域的 

navigator.clipboard

 对象。

安全域包括本地访问与开启TLS安全认证的地址，如 

https

 协议的地址、

127.0.0.1

 或 

localhost

 。

所以要解决这个bug就是要做一个兼容写法，在安全域下使用 

navigator.clipboard

 提升效率，非安全域退回到 

document.execCommand('copy');

 保证功能一直可用。

// 先给要复制的文本或者按钮加上点击事件后，并将要复制的值传过来
    async copyValue(val) {
      if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        this.$message.success('复制成功')
        return navigator.clipboard.writeText(val)
      } else {
        // 创建text area
        const textArea = document.createElement('textarea')
        textArea.value = val
        // 使text area不在viewport，同时设置不可见
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()
        this.$message.success('复制成功')
        return new Promise((res, rej) => {
          // 执行复制命令并移除文本框
          document.execCommand('copy') ? res() : rej()
          textArea.remove()
        })
      }
    },
           

运行一下，本地和测试环境都没问题啦 ~

时隔半个多月后，又发现了bug，这个方法在微信浏览器打开是不生效的，所以又找到了个新方法，有需要的话可以参考一下vue 适配微信浏览器 实现点击按钮复制文本 clipboard_Naive_Jam的博客-CSDN博客