pc、移动端适配的复制功能

pc端

使用navigator.clipboard可能会出现本地可以复制，发布到测试环境后无法复制的情况，是由于浏览器禁用了非安全域的 navigator.clipboard 对象

// 复制链接
    copyLink() {
      // navigator.clipboard
      //   .writeText(`${this.webviewUrl}`)
      //   .then(() => {
      //     this.$message.success("复制成功");
      //   });
      this.handleCopyValue(this.webviewUrl)
        .then(() => {
          this.$message.success("复制成功");
        })
        .catch(() => {
          this.$message.error("自动复制失败，请手动复制");
        })
    },
    handleCopyValue(text) {
      //浏览器禁用了非安全域的 navigator.clipboard 对象
      //在线上环境会报错 TypeError: Cannot read properties of undefined (reading 'writeText')
      if (!navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(text)
      } else {
        // 判断是否支持拷贝
        if (!document.execCommand('copy')) return Promise.reject()
        // 创建标签，并隐藏
        const textArea = document.createElement('textarea')
        textArea.style.position = 'fixed'
        textArea.style.top = textArea.style.left = '-100vh'
        textArea.style.opacity = '0'
        textArea.value = text
        document.body.appendChild(textArea)
        // 聚焦、复制
        textArea.focus()
        textArea.select()
        return new Promise((resolve, reject) => {
          // 不知为何，必须写这个三目，不然copy不上
          document.execCommand('copy') ? resolve() : reject()
          textArea.remove()
        })
      }
    },

移动端

不同的手机型号复制方式不同：

• h5link为放置复制文本的id名称
• showData.value.h5Url为要复制的文本

const copyLink = () => {
  if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    const range = document.createRange();
    range.selectNode(document.getElementById('h5link'));
    const selection = window.getSelection();
    if (selection.rangeCount > 0) selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
    showNotify({ type: 'success', message: '复制成功', duration: 1000 });
  } else {
    var input = document.createElement('input');
    input.setAttribute('readonly', 'readonly');
    input.setAttribute('value', showData.value.h5Url);
    document.body.appendChild(input);
    input.setSelectionRange(0, 9999);
    input.select();
    if (document.execCommand('copy')) {
      document.execCommand('copy');
      showNotify({ type: 'success', message: '复制成功', duration: 1000 });
    }
    document.body.removeChild(input);
  }
}