一键复制:clipboard.js

time:2023.07.22

一、cdn

官网地址
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>

二、使用

dom

<span id="text">被复制的文字</span>
<button @click="copyLink" data-clipboard-target="#text" id="copyBtn">
复制链接
</abutton>

方法

// 复制链接
    copyLink() {
      try {
        let clipboard = new ClipboardJS('#copyBtn')
        clipboard.on('success', function (e) {
          e.clearSelection()
         alert('复制成功')
        })
        clipboard.on('error', function (e) {
          alert('复制失败')
          console.error('clipboard error', e)
        })
        setTimeout(() => {
          clipboard.destroy();// 防止多次alert提示
        }, 0)
      } catch {
        alert('浏览器不支持自动复制,请手动复制或刷新重试')
        return
      }
    },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。