Vue.js 点击按钮复制文本到剪贴板 - 使用 Clipboard.js

在Vue中实现点击按钮后将变量msg字符串中的字符复制到剪贴板，可以使用Clipboard API。首先，需要在HTML中引入Clipboard.js库：\n\nhtml\n<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>\n\n\n然后，在Vue组件中，可以通过以下方式实现复制功能：\n\nhtml\n<template>\n <div>\n <button @click="copyToClipboard">复制到剪贴板</button>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n msg: "Hello World"\n };\n },\n methods: {\n copyToClipboard() {\n const clipboard = new ClipboardJS('.btn', {\n text: () => {\n return this.msg;\n }\n });\n\n clipboard.on('success', (e) => {\n console.log('复制成功');\n clipboard.destroy();\n });\n\n clipboard.on('error', (e) => {\n console.log('复制失败');\n clipboard.destroy();\n });\n\n clipboard.onClick({ target: document.querySelector('.btn') });\n }\n }\n};\n</script>\n\n\n在上述代码中，点击按钮后会调用copyToClipboard方法。该方法创建了一个ClipboardJS实例，将this.msg作为文本复制到剪贴板中。成功复制后会触发success事件，失败复制会触发error事件。最后，通过clipboard.onClick方法模拟点击按钮触发复制操作。\n\n需要注意的是，ClipboardJS库需要在按钮被点击后立即执行复制操作，因此需要在按钮的click事件处理函数中执行复制操作。