Vue.js如何实现点击同一按钮直接复制指定值的URL复制按钮功能

问题原因 #

你现有代码的错误在于：copyUrl 方法中调用的 select() 是DOM元素（如input、textarea）独有的方法，但你调用方法时传入的是字符串 '1234'，字符串本身没有这个API，执行会直接报错。

解决方案 #

直接修改copyUrl方法即可，不需要改动按钮代码，两种实现可选：

方案1：全浏览器兼容实现

通过临时创建隐藏的DOM元素完成复制，兼容性最好：

methods: {
  copyUrl(text) {
    // 创建临时存储文本的DOM元素
    const tempTextarea = document.createElement('textarea')
    tempTextarea.value = text
    // 插入到页面后隐藏，避免视觉干扰
    document.body.appendChild(tempTextarea)
    tempTextarea.style.cssText = 'position: absolute; left: -9999px; top: -9999px'
    // 执行复制逻辑
    tempTextarea.select()
    document.execCommand('copy')
    // 销毁临时元素
    document.body.removeChild(tempTextarea)
    // 可自行替换为项目用的提示组件
    alert('复制成功')
  }
}

方案2：现代浏览器标准实现

用官方推荐的Clipboard API实现，逻辑更简洁，同时兼容旧浏览器做降级：

methods: {
  async copyUrl(text) {
    try {
      // 现代浏览器优先用标准API
      await navigator.clipboard.writeText(text)
      alert('复制成功')
    } catch (e) {
      // 旧浏览器降级走临时DOM方案
      const tempTextarea = document.createElement('textarea')
      tempTextarea.value = text
      document.body.appendChild(tempTextarea)
      tempTextarea.style.cssText = 'position: absolute; left: -9999px; top: -9999px'
      tempTextarea.select()
      document.execCommand('copy')
      document.body.removeChild(tempTextarea)
      alert('复制成功')
    }
  }
}

修改完成后点击按钮即可正常复制传入的文本内容。

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