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

2018-12-14  本文已影响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实现复制成功/失败后的逻辑。

上一篇 下一篇

猜你喜欢

热点阅读