首页vue-markdown复制

vue-markdown复制

时间: 2025-02-13 16:17:14 浏览: 51

### 使用 `vue-markdown` 实现复制功能为了实现 `vue-markdown` 中的复制功能，可以通过结合 Vue.js 的事件处理机制以及 Clipboard API 来完成。下面提供了一个具体的例子来展示如何在 Markdown 渲染后的文本旁边添加一个按钮，点击该按钮即可将对应的 Markdown 文本复制到剪贴板。 #### HTML 结构与组件使用 ```html <template> <div>  <vue-markdown>{{ markdownContent }}</vue-markdown>  <button @click="copyToClipboard">Copy</button> </div> </template> ``` #### JavaScript 部分 ```javascript <script setup> import { ref } from 'vue'; // 导入 vue-markdown 组件 import VueMarkdown from '@adapttive/vue-markdown'; const markdownContent = ref('# Hello, world!\nThis is a paragraph with *italic* and **bold** text.'); function copyToClipboard() { navigator.clipboard.writeText(markdownContent.value).then(() => { alert('Copied!'); }).catch(err => { console.error('Failed to copy: ', err); }); } </script> ``` 此方法利用了现代浏览器提供的 Clipboard API 直接访问用户的剪切板数据[^3]。当用户点击页面上的 “Copy” 按钮时，会调用 `navigator.clipboard.writeText()` 方法把当前显示的 Markdown 原始字符串写入系统的剪贴板中，并给出成功与否的通知提示框。需要注意的是，在实际开发环境中部署这项特性之前，请确保目标环境支持 Clipboard API 并考虑兼容性和安全性问题。

阅读全文