如何在Vue.js中不使用input元素实现点击图标复制文本功能

错误原因说明 #

你之前的写法无法生效是因为<p>属于普通文本元素，没有表单元素专属的focus()、select()方法，也不支持type属性，所以设置这些属性、调用相关方法都不会生效。

方案1：现代浏览器优先推荐 Clipboard API #

该方案是W3C标准实现，完全不需要操作DOM，你本身已经持有要复制的code变量，直接调用API即可：

async copy() {
  try {
    // 直接写入要复制的内容到系统剪贴板
    await navigator.clipboard.writeText(this.code)
    alert('复制成功')
  } catch (err) {
    alert('复制失败，请手动复制内容')
  }
}

注意：该API仅支持HTTPS协议域名和localhost本地开发环境，目前主流浏览器支持率超过95%。

方案2：兼容老旧浏览器 Selection API #

如果需要兼容非常老的浏览器，可以用选区API选中p标签文本后执行复制命令，不需要创建额外input元素：

1. 给p标签绑定ref

<p ref="code">{{ code }}</p>

2. 实现copy方法

copy() {
  const codeDom = this.$refs.code
  const selection = window.getSelection()
  const range = document.createRange()
  // 选中p标签内所有文本
  range.selectNodeContents(codeDom)
  selection.removeAllRanges()
  selection.addRange(range)
  // 执行复制
  document.execCommand('copy')
  // 清除选中状态，避免用户看到高亮效果
  selection.removeAllRanges()
  alert('复制成功')
}

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