Vue3 开发中复制 Item 到剪切板：使用 Clipboard API

在 Vue3 开发中，你可以使用 Clipboard API 来复制 item 的值到剪切板。首先，你需要先安装 clipboard 包：\n\nshell\nnpm install clipboard --save\n\n\n然后，在你的代码中导入 clipboard 并使用它来复制 item 的值到剪切板：\n\njavascript\nimport Clipboard from 'clipboard';\n\nconst copyItem = (item) => {\n const clipboard = new Clipboard('.copy-button', {\n text: () => item\n });\n\n clipboard.on('success', () => {\n console.log('Item copied to clipboard');\n clipboard.destroy(); // 销毁 clipboard 实例\n });\n\n clipboard.on('error', () => {\n console.log('Failed to copy item to clipboard');\n clipboard.destroy(); // 销毁 clipboard 实例\n });\n\n clipboard.onClick({ currentTarget: document.createElement('button') }); // 触发复制操作\n};\n\n\n在上述代码中，我们创建了一个新的 Clipboard 实例，并在构造函数中传入一个选择器（此处为 '.copy-button'）和一个配置对象。配置对象中的 text 属性是一个函数，它返回我们要复制的 item 的值。然后，我们通过监听 success 和 error 事件来处理复制成功和失败的情况。最后，我们通过调用 clipboard.onClick 方法手动触发复制操作。\n\n请注意，这里的 '.copy-button' 选择器是一个虚拟的选择器，它并不代表实际的按钮元素。你可以将这个选择器替换为你实际使用的按钮的选择器。\n\n希望对你有帮助！