Vue中配合clipboard.js实现点击按钮复制内容到剪切板

1. 概述
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+; 

2.引入方式：

• NPM方式：npm install clipboard --save
•  

• <div id="boo">{{copy111}}</div>
  <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

   

  • <script>
      ​​​​​import Clipboard from 'clipboard'; 

    data(){
      return{
        copy111:'鹿达'
      }
    },

  • mounted:function(){
          var that = this;
          var clipboard = new Clipboard('.btn',{
            // 通过target指定要复印的节点
            text: function() {
              return that.copy111;
            }
          });
    //成功回调
          clipboard.on('success', function(e) {
            skyNoty(e.text);
            e.clearSelection();
          });
        },

  • </script>