首页vue3 复制内容到粘贴板

vue3 复制内容到粘贴板

时间: 2025-01-07 10:30:13 浏览: 123

### 实现 Vue3 中复制文本到剪贴板功能在 Vue3 项目中实现复制文本到剪贴板的功能可以通过多种方式完成。一种常见的方式是利用 `v-clipboard` 指令，不过该指令库可能不完全兼容最新的 Vue 版本特性。另一种更推荐的方法是直接调用浏览器原生 API 或者使用第三方库如 `clipboard.js`。 #### 使用 Clipboard API 的解决方案通过 JavaScript 提供的 Clipboard API 可以轻松地将字符串写入用户的剪切板： ```javascript // 定义一个名为 useClipboard 的组合式函数来封装逻辑 import { ref } from "vue"; export function useClipboard() { const textToCopy = ref(""); const copySuccessMessage = ref(""); async function copyText(text) { try { await navigator.clipboard.writeText(text); copySuccessMessage.value = "已复制"; } catch (err) { console.error("无法复制文本: ", err); copySuccessMessage.value = "复制失败"; } } return { textToCopy, copySuccessMessage, copyText }; } ``` 接着，在组件内部引入并应用此自定义 hook 函数： ```html <template> <div>  <input v-model="textToCopy" placeholder="请输入要复制的文字..." />  <button @click="copyText(textToCopy)">点击复制</button>  {{ copySuccessMessage }} </div> </template> <script setup> import { useClipboard } from './useClipboard'; const { textToCopy, copySuccessMessage, copyText } = useClipboard(); </script> ``` 这种方法不仅简洁明了而且充分利用了现代 Web 技术的优势[^1]。

阅读全文