Vue中如何实现直接复制传入函数的动态URL功能？

你的现有代码问题在于仅调用了document.execCommand('copy')但未指定要复制的内容，因此无法完成复制操作，以下是两种可行实现方式：

方案1：兼容全浏览器（临时DOM实现） #

无需依赖现有输入框元素，自动创建临时不可见的输入框完成复制流程，代码如下：

// 注意方法名要和模板里的@click绑定的名称对应，你模板里写的是copyUrl，这里方法名要改成copyUrl
copyUrl(dynamic_url) {
  // 创建临时input元素
  const tempInput = document.createElement('input')
  // 赋值要复制的URL
  tempInput.value = dynamic_url
  // 设置元素不可见
  tempInput.style.opacity = '0'
  tempInput.style.position = 'absolute'
  tempInput.style.left = '-9999px'
  // 插入到页面
  document.body.appendChild(tempInput)
  // 选中内容
  tempInput.select()
  // 执行复制
  document.execCommand('copy')
  // 移除临时元素
  document.body.removeChild(tempInput)
  // 可选：添加复制成功提示
  alert('链接复制成功')
}

方案2：现代浏览器原生Clipboard API实现（更简洁） #

无需创建任何DOM元素，直接调用浏览器原生剪贴板接口，仅支持HTTPS/localhost环境，现在绝大多数场景都适用：

async copyUrl(dynamic_url) {
  try {
    await navigator.clipboard.writeText(dynamic_url)
    alert('链接复制成功')
  } catch (err) {
    alert('复制失败，请手动复制')
  }
}

补充说明 #

• 模板部分不需要修改，直接传入你的动态URL变量即可，比如循环生成的列表URL可以直接写@click="copyUrl(item.url)"
• 若使用Vue3，方法逻辑和上述完全一致，仅组件内方法的定义语法按需调整即可

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