GitLab

背景

使用 vue-clipboard3 的 toClipboard 复制空字符串时报错，代码与报错信息如下：

  try {
    const { toClipboard } = useClipboard();
    await toClipboard('');
  } catch (error) {
    console.log('error', error);
  }

阅读源码

node_modules/vue-clipboard3/dist/esm/index.js 核心代码

// make fake element
const fakeEl = document.createElement('button');
// setup a new Clipboard.js
const clipboard = new Clipboard(fakeEl, {
    text: () => text,
    action: () => 'copy',
    container: container !== undefined ? container : document.body
});
// ...
// simulate click
fakeEl.click(); // 调用 click 触发复制

核心机制为 clipboard.js node_modules/clipboard/src/clipboard.js

核心流程：onClick > action = 'copy' > text = ClipboardActionDefault > text ? 'success' : 'error'（得到 error） > reject(e)（抛出 emit 回调参数）

• 通过 createFakeElement，创建一个 textarea，将文本放入
• 通过 select 选中内容，然后通过 command('copy') 也就是 document.execCommand('copy') 复制选中内容到剪切板
• 通过 ClipboardActionDefault 拿到文本，如果文本为空，emit 抛出 error，以及回调参数 { action, text, trigger, clearSelection }
• 可以在控制台内测试，如果不选中文本直接执行 document.execCommand('copy') 时不生效的
• 所以不能复制空字符串

解决方案

使用 avigator.clipboard.writeText('') 代替