点击复制文本到剪切板-适用于页面上有多个实例的情况

        clipboard想必大家都很熟悉了，用起来也很简单，具体用法可参考 GitHub。但官方给出的使用方法只适用于页面中只有一个实例的情况，若页面中多处需要实现复制文本功能，直接使用创建实例的方法未免过于繁冗。如需要对遍历生成的列表进行复制，就需要对使用方法进行封装。

        以下代码基于vue3语法，其他环境下，原理类似。

import Clipboard from 'clipboard';
import { onUnmounted } from 'vue';

/**
 * 将文本添加至剪切版中
 *
 * useage:
 * ```js
 *     const { copy } = useClipBoard();
 *     copy("you content").then(callback)
 * ```
 * @returns copy 方法
 */
const useClipBoard = () => {
  //初始一个div节点，用于剪切版对象，并不需要添加至 dom节点中
  const el = document.createElement('div');
  //初始化剪版对象
  const clipboard = new Clipboard(el);

  onUnmounted(() => {
    clipboard.destroy();
  });
  /**
   * 将指定内容 添加 剪切版中。
   * @param {*} text  需要copy的内容
   * @returns 返回一个promise对象[可以不返回], 只是方便调用时，可以用then来写一些逻辑
   */
  const copy = (text = '') =>  {
    el.setAttribute('data-clipboard-text', text);
    //触发copy事件
    el.click();
    return Promise.resolve();
  };

  return { copy };
};

export default useClipBoard;

        使用方法如下：

<script>
import useClipBoard from 'useClipBoard';
export default {
    setup() {
        const { copy } = useClipBoard();
        copy('需要复制的文本').then(() => {
            console.log('复制成功!');
        });
    }
}
</script>

        需要注意的是，由于封装的方法中使用了 onUnmounted 生命周期钩子，在vue3中，调用 useClipBoard 方法时，必须直接在 setup 中调用，不能在 methods、computed 或其他生命周期中调用，否则实例不能被及时销毁，vue3也会给出报错信息。但 copy 方法的使用不受限制。