vue中Clipboard 复制剪切功能的实现

使用前提:了解各个属性
***1.data-clipboard-action=""属性来指明 复制（copy）还是剪切（cut）内容。
如果你省略这个属性，则默认为复制（copy）。cut只能在input和textare中起作用.

***2.data-clipboard-target指向复印节点，这里指input的目标id ;

***3.好消息是，如果你需要支持旧浏览器，clipboard.js 可以优雅降级。你所要做的就是在
 success 事件触发时提示用户“已复制！”，error 事件触发时提示用户“按 Ctrl+C 复制文字”
（此时用户要复制的文字已经选择了）。

***4.你也可以通过运行 Clipboard.isSupported() 来检查浏览器是否支持 clipboard.js，如果不支持，
你可以隐藏复制/剪切按钮。

↓↓

1.npm install --save clipboad

↓↓

2.import Clipboad from "clipboad";

或者

↓↓

3.html元素(input、textare、div中通过copy/cut获取内容目标内容):

方法一:从另一个元素复制文本

方法二:从另一个元素剪切文本

方法三:通过target，text的function复印内容.
Copy_target

hello

     var clipboard = new Clipboard('.btn', {
      // 通过target指定要复印的节点
         target: function() {// 注意this指向的问题
              return document.querySelector('div');
         };
    或者
    text: function() {// 注意this指向的问题
            return 'to be or not to be';
        }
     });
 
     clipboard.on('success', function(e) {
         console.log(e);
     });
 
     clipboard.on('error', function(e) {
         console.log(e);
     });

方法四:通过data-clipboard-text属性返回复印的内容.

     Copy

   var btn = document.getElementById('btn');
   var clipboard = new Clipboard(btn);
   clipboard.on('success', function(e) {
      console.log(e);
   });

   clipboard.on('error', function(e) {
      console.log(e);
   );

方法五:多节点获取button的data-clipboard-text值.
Copy
Copy
Copy
var btns = document.querySelectorAll('button');
var clipboard = new Clipboard(btns);
*******通过button返回所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，
返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3.

↓↓

4.方法一,方法二的js

shareUrl(){
   let clipboard = new Clipboard('#copyUrl');// 实例化对象
   clipboard.on('success', function(e) {
      Toast({
         message:"Successfully copied to the Clipboard! ",
         duration:1200
      });
      e.clearSelection();// 清空粘贴区
   });
   clipboard.on('error', function(e) {
      Toast({
         message:"Copy failed, please select Copy manually! ",
         duration:1200
      });
   });
},

↓↓

5.1---如果你希望动态设置 target，你需要返回一个节点（Node）.
new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

5.2---如果你希望动态设置 text，你需要返回一个字符串。
new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

5.3---如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得
焦点的元素设置为 container 属性的值。
new Clipboard('.btn', {
    container: document.getElementById('modal')
});

5.4---同样地，如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件
以及创建的对象。
var clipboard = new Clipboard('.btn');
clipboard.destroy();

↓↓

clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+; 

详细请查看官网:  https://clipboardjs.com/#example-action
原生js还有一个方法:  https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand.

===================快速实现复制到剪贴板：

点击复制后在右边textarea CTRL+V看一下