美文网首页
一键复制:clipboard.js

一键复制:clipboard.js

作者: 清平乐啊 | 来源:发表于2023-07-21 11:09 被阅读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
      }
    },

相关文章

网友评论

      本文标题:一键复制:clipboard.js

      本文链接:https://www.haomeiwen.com/subject/wzltpdtx.html