vue3如何Marked实现代码一键复制
时间: 2023-03-21 10:00:38 浏览: 103
在 Vue3 中实现一键复制功能,可以结合 `marked` 和 `clipboard.js` 库来完成。
首先,安装所需的依赖:
```
npm install marked clipboard --save
```
然后,在 Vue 组件中使用 `marked` 库将 Markdown 转换成 HTML,并使用 `v-html` 指令将结果渲染到模板中:
```vue
<template>
<div>
<div v-html="html"></div>
</div>
</template>
<script>
import marked from 'marked';
import ClipboardJS from 'clipboard';
export default {
data() {
return {
markdown: `# Hello World\n\`\`\`javascript\nconsole.log('Hello World');\n\`\`\``,
html: ''
};
},
mounted() {
this.html = marked(this.markdown);
const clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', () => {
console.log('Copied!');
});
}
};
</script>
<style>
.copy-btn {
cursor: pointer;
margin-left: 10px;
}
</style>
```
在 `mounted` 钩子中,创建一个 `ClipboardJS` 实例并指定要复制的元素,这里使用了一个 class 为 `copy-btn` 的按钮。当用户点击该按钮时,`ClipboardJS` 库会将指定元素的内容复制到剪贴板中。
最后,将复制按钮添加到模板中,并为其添加 `copy-btn` class:
```vue
<template>
<div>
<div v-html="html"></div>
<button class="copy-btn" data-clipboard-target=".code-block">Copy</button>
</div>
</template>
<script>
import marked from 'marked';
import ClipboardJS from 'clipboard';
export default {
data() {
return {
markdown: `# Hello World\n\`\`\`javascript\nconsole.log('Hello World');\n\`\`\``,
html: ''
};
},
mounted() {
this.html = marked(this.markdown);
const clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', () => {
console.log('Copied!');
});
}
};
</script>
<style>
.copy-btn {
cursor: pointer;
margin-left: 10px;
}
</style>
```
这样,用户就可以在点击按钮后,将代码块的内容复制到剪贴板中。注意,这里使用了 `data-clipboard-target` 属性来指定要复制的元素,该属性的值为一个 CSS 选择器,指定要复制的元素。在这个例子中,选择器为 `.code-block`,它对应着包裹代码块的 `pre` 元素。