一键复制:clipboard.js

2023-07-21  本文已影响0人  清平乐啊

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
      }
    },
上一篇下一篇

猜你喜欢

热点阅读