科学地在 Vue3 使用剪贴板

安装

pnpm i vue-clipboard3

后缀 3 表示它是适用于 Vue3 setup 的，使用useXXX而非 this.xxx 的方式使用。

使用方法

核心 3 行代码如下，不需要在其他地方 use。

import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard(); // 这个函数是返回值的唯一成员
await toClipboard(someString, element);

其中 element 是一个 HTMLElement 对象，在 Vue 中可以用 someRef.value.$el 来获取。

根据源码， toClipboard 的原理是，在 container 里创建一个 fake 按钮，点击这个按钮后将一个 fake 文本框里的文本粘到剪贴板里（这步是 clipboard.js 实现的）。
通常情况下，并不需要传入第2个参数，默认为 document.body。但有一种情况例外：打开了模态窗口。在这种情况下，点击事件会被屏蔽，创建在 document.body 的 fake 按钮的模拟点击被挡住，这样就会无法成功复制。这时就需要传入第 2 个参数，它可以是模态窗口内用户可以点击的任何元素。这样就没有问题了。