VueJS项目Chrome浏览器点击复制链接到剪贴板功能失效如何解决

导致Chrome下复制失效主要有3个常见原因：

• Chrome对已废弃的document.execCommandAPI限制更严格，要求必须在用户交互的同步回调中执行，且操作的input元素不能设置display: none、visibility: hidden等完全隐藏的样式，否则select()方法会静默失效，Firefox对这类场景的容忍度更高所以可以正常运行。
• 你使用的a标签如果没有设置空跳转逻辑或者点击时没有阻止默认事件，可能触发页面刷新，打断复制流程。
• 部分Chrome版本对input选中逻辑的兼容性差，仅调用select()可能无法完整选中输入框内容，导致复制为空。

方案1：兼容原有实现，修复边界问题 #

首先调整输入框的隐藏样式，不要用完全隐藏的属性，改用移出可视区的方案：

.copyurl_txt {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  z-index: -999;
}

然后修改copyURL方法的逻辑：

copyURL(e) {
  // 阻止a标签默认跳转/刷新行为
  e.preventDefault()
  const inputEle = this.$refs.text
  // 完善选中逻辑，适配全平台
  inputEle.focus()
  inputEle.select()
  inputEle.setSelectionRange(0, inputEle.value.length)
  try {
    const copySuccess = document.execCommand('copy')
    this.flash = copySuccess ? "lien copié dans le presse-papiers" : "复制失败，请手动复制链接"
  } catch (err) {
    this.flash = "复制失败，请手动复制链接"
  }
}

方案2：替换为标准Clipboard API（推荐） #

document.execCommand已经被W3C废弃，优先使用现代浏览器原生支持的Clipboard API，仅在低版本浏览器降级到原有方案：

async copyURL(e) {
  e.preventDefault()
  try {
    // 直接写入剪贴板，不需要额外的input元素辅助
    await navigator.clipboard.writeText(this.base)
    this.flash = "lien copié dans le presse-papiers"
  } catch (err) {
    // 降级兼容旧逻辑
    const inputEle = this.$refs.text
    inputEle.focus()
    inputEle.select()
    inputEle.setSelectionRange(0, inputEle.value.length)
    document.execCommand('copy')
    this.flash = "lien copié dans le presse-papiers"
  }
}

注意：Clipboard API要求页面必须运行在HTTPS环境下，localhost本地调试不受限制。

内容的提问来源于stack exchange，提问作者Veenavi Anutthara