美文网首页
vue使用clipboard.js最新版2.04实现复制到剪贴板

vue使用clipboard.js最新版2.04实现复制到剪贴板

作者: 醉笙情丶浮生梦 | 来源:发表于2018-12-14 21:00 被阅读0次

官网链接 https://clipboardjs.com/
data-clipboard-text 使用例子
//最好使用input+button组合 兼容性更好

<button id="btn" class="copy" 
          :data-clipboard-text="copyValue"
          @click="copy">
          点击复制
</button>

新版没有 Clipboard 方法而是转用 ClipboardJS 方法

    var app = new Vue({
      el: '#app',
      data: {
        copyValue: '一个测试'
      },
      methods: {
        copy() {
          //检测是否兼容
          var copy = ClipboardJS.isSupported()
          console.log("点击复制", copy);
          // const btnCopy = new Clipboard('btn');
          let clipboard = new ClipboardJS('.copy');
          clipboard.on('success', function (e) {
            console.log(e);
            // 释放内存
            clipboard.destroy()
          });
          clipboard.on('error', function (e) {
            console.log(e);
          });
        }
      }
    })

可以在success和error实现复制成功/失败后的逻辑。

相关文章

网友评论

      本文标题:vue使用clipboard.js最新版2.04实现复制到剪贴板

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