vue3如何实现Marked实现代码一键复制

Vue 3 可以通过自定义指令 (Directive) 和 Marked 库来实现代码一键复制的功能。

下面是实现的基本步骤：

1. 安装 Marked 库

npm install marked

2. 创建一个自定义指令

在 Vue 3 中，自定义指令可以通过 `app.directive` 方法来创建。下面是一个创建 `copy-code` 指令的示例代码：

import marked from 'marked';

const copyCodeDirective = {
  mounted(el, binding) {
    const code = el.querySelector('code');
    const button = document.createElement('button');
    button.innerText = 'Copy';
    button.addEventListener('click', () => {
      navigator.clipboard.writeText(code.textContent.trim());
      button.innerText = 'Copied!';
      setTimeout(() => {
        button.innerText = 'Copy';
      }, 2000);
    });
    el.appendChild(button);
  },
  updated(el) {
    const code = el.querySelector('code');
    const html = marked(code.textContent);
    code.innerHTML = html;
  }
};

export default copyCodeDirective;

这个自定义指令会在绑定的元素上添加一个 "Copy" 按钮，并且当用户点击按钮时，会将元素内部的代码文本复制到剪贴板中。

3. 在组件中使用自定义指令

<template>
  <pre v-copy-code><code>{{ code }}</code></pre>
</template>

<script>
import copyCodeDirective from './copyCodeDirective.js';

export default {
  directives: {
    copyCode: copyCodeDirective
  },
  data() {
    return {
      code: 'console.log("Hello, world!");'
    }
  }
};
</script>

在组件中，我们可以将 `v-copy-code` 指令绑定到 `<pre>` 标签上，然后将代码文本插入到 `<code>` 标签中。

当我们在浏览器中运行这个组件时，就会看到代码旁边出现一个 "Copy" 按钮。当我们点击该按钮时，代码文本就会被复制到剪贴板中。

希望这个示例能够帮助您实现您的功能。