复制文本，进行粘贴

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

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

1 篇文章

订阅专栏

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

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('复制成功 ')   //  尝试去粘贴一下是否成功
    },
}