用vue實現複製到剪下板

通過在網上檢視比較，發現使用clipboard.js是比較理想的手段：1，不用flash，2，外掛很小，壓縮後只有3kb。

關於clipboard.js，官方文件請戳：https://clipboardjs.com。由於文件是英文的，下面我會簡單解釋一下具體使用方法。其實目前已經有根據該外掛封裝好的vue外掛了，由於專案中只有一個地方用到該功能，我就沒有去考慮封裝外掛的情況。不過，就算不用封裝外掛，在vue中使用起來也是很簡單，基本上只要按照官網文件的使用方法來就ok。如果有踩到坑的歡迎留言補充。

一、下載：

二、引入：

三、使用：

• 當需要複製的內容在另一個dom上，比如：
  <p>連結：<a>http://www.baidu.com </a><button>複製</button></p>

  
  通過點選button來複制前面的連結時，使用方法如下：

  html部分：

  <!-- Target -->
  <p>連結：<a id="targetId">http://www.baidu.com </a>
  <!-- Trigger -->
  <button class="btn" data->clipboard-target="#targetId">複製</button>
  </p>

  js部分：

  通過傳遞dom的選擇器或html等來初始化一個例項
  
var clipboard = new ClipboardJS('.btn');

• 當需要剪下操作時，只需要為button指定data-clipboard-action屬性為cut即可。該屬性預設值是copy

  html部分修改為：

  <!-- Target -->
  <textarea id="bar">Mussum ipsum cacilds...</textarea>
  <!-- Trigger -->
  <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
   Cut to clipboard
  </button
   
  >

  注意：cut屬性只能用於input textarea這類target元素上

• 當然，如果複製的內容就是觸發元素本身呢？可以使用data-clipboard-text屬性。

  html部分修改為：

  <!-- Trigger -->
  <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
  Copy to clipboard
  </button>

四、事件

為提高使用者友好性，你可能需要給使用者一些操作反饋或錯誤提示，或者捕獲觸發事件的dom物件，clipboard.js提供了‘success’ ‘error’事件。

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection(); //該方法用於清除文字選中後的預設樣式（一般是文字區域出現背景色）
});
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

五、高階用法

如果你不想像前面提到的一樣修改現有的HTML，可以使用clipboard.js提供的API。只需要宣告函式，處理邏輯然後返回需要的值。比如,

• 如果你想動態的設定target html，你需要返回一個Node:

  new ClipboardJS('.btn', {
      target: function(trigger) {
          return trigger.nextElementSibling;
      }
  });

• 如果你想動態設定被複制的內容，需要返回string:

  new ClipboardJS('.btn', {
      text: function(trigger) {
          return trigger.getAttribute('aria-label');
      }
  });

• 如果你使用bootstrap 模態框，或者其他外掛，噹噹前focus的元素改變時，需要手動指定當前container為focused的元素:

  new ClipboardJS('.btn', {
      container: document.getElementById('modal')
  });

• 如果是在單頁面應用裡，為了更精確的處理dom在不同生命週期的邏輯，你需要銷燬創造的事件和例項，使用下面方式:

  var clipboard = new ClipboardJS('.btn');
  clipboard.destroy();

六、瀏覽器支援

clipboard.js能被以下瀏覽器支援：
* chrome 42+
* IE edge 12+
* Firefox 41+
* IE 9+
* Opera 29+
* Safari 10+

為了有更好的使用者體驗，在使用時，可以在success回撥裡提示‘複製/剪下成功’，在error回撥裡提示：‘請按Ctrl + C進行復制’,因為此時的內容已經被選中了。

另外：你也可以通過執行ClipboardJS.isSupported()來判斷瀏覽器是否支援clipboard.js，如果不支援，您可以將複製/剪下按鈕從頁面上隱藏。

以上是對clipboard.js的使用介紹。基本就是對官方文件的翻譯。我在專案裡只用到了基礎的用法，還沒有嘗試高階用法。所以解釋的可能不是很到位。歡迎有用到的同學一塊交流學習。