美文网首页
一键复制: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