Clipboard.js 的使用踩坑不完全记录

前言

由于最近项目需要文本复制功能，浏览一圈决定使用 Clipboard.js，但在使用的过程中遇到不少坑，特此记下以备索引。

基本使用

1. 引用
   支持引用的方式有多种，如普通页面引用

AMD/ES6 Module引用

npm i clipboard

···

const Clipboard = require('clipboard')
// or
import Clipboard from 'clipboard'

2. 基本使用

在点击 button 后，将自动会复制 target 内容至粘贴板。

---

对taget 的操作可以是 copy 或 cut，可以通过data-clipboard-action="cut" 或data-clipboard-action="cut"。当操作类型是cut 时，target的contenteditadble必须为 true。换句话说，当使用剪切时，目标必须为可读写的 textarea或 HTML element的contenteditadble为 true

3. 事件监听
   可以使用事件监听侦听复制/剪切事件， 然后对复制/剪切的操作结果作处理。使用示例:

// 引用官方文档
var clipboard = new Clipboard('.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);
});

使用事件监听可以对复制/剪切事件的成功与否进行回调。常见的场景是在复制成功后提示用户复制成功，复制失败后提示用户，让其手动复制。

4. 注意事项 && 坑
   在使用 clipboard.js 复制时，必须有一个由用户手动发起事件，不然调用不成功。但可以采用取巧的办法解决：

  /**
    * 文本复制
    * 
    * @param {string} text - 要复制的文本 
    * @param {object} event - 用户触发的事件 
    */
  const clipboard = (text, event) => {
      const cb = new Clipboard('.t', {
          text: () => text
      })
      cb.on('success', (e) => {
          cb.off('error')
          cb.off('success')
      })
      cb.on('error', (e) => {
          cb.off('error')
          cb.off('success')
      })
      cb.onClick(event)
  }

调用时，如

 const btn = document.querySelector('.btn')
 btn.addEventListener('click', event => {
    clipboard('Hello World from clipboard', event)
 })
 

这样，就可以随时调用而不需要创建 DOM了~

如上，如有疑问，欢迎交流~~

END