复制文本，进行粘贴

丶凡人

于 2022-07-04 09:33:47 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

分类专栏：复制—粘贴文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Devil678/article/details/125593530

复制—粘贴专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的复制链接按钮方法。通过简单的前端代码即可为用户提供复制指定文本或链接的功能，适用于分享场景。代码示例中详细展示了如何创建按钮并绑定点击事件以触发复制操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML：

 <div>
      <button
         :data-clipboard-action="shareUrl"
         data-clipboard-target="#share-code"
         @click='copyBy($event)'
       >复制链接</button>
  </div>

Script：

data{
  return{
    shareUrl:'哈哈哈哈哈哈，我是要复制的文本，你成功了吗？' // 这是你复制的文本，或者URL等
  }
}

methods：{
      // 复制地址
    copyBy () {
      console.log(`this.shareUrl:${this.shareUrl}`);
      let oInput = document.createElement('input')
      oInput.value = this.shareUrl;    //  把  本地的值，或者获取的值赋值给他
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy', false, null)
      document.body.removeChild(oInput)
      alert('复制成功 ')   //  尝试去粘贴一下是否成功
    },
}