写一个一键复制功能代码

好的，以下是一个简单的 JavaScript 代码，可以实现一键复制功能：

function copyText(text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log('Copied to clipboard: ' + text);
    })
    .catch((error) => {
      console.error('Copy to clipboard failed: ' + error);
    });
}

当调用 `copyText` 函数并传入需要复制的文本时，它将自动将其复制到用户的剪贴板中。

请注意，由于某些浏览器的限制，该代码可能无法在所有情况下正常工作，具体取决于浏览器和操作系统。

相关问题

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

在 Vue3 中实现一键复制功能，可以结合 `marked` 和 `clipboard.js` 库来完成。

首先，安装所需的依赖：

npm install marked clipboard --save

然后，在 Vue 组件中使用 `marked` 库将 Markdown 转换成 HTML，并使用 `v-html` 指令将结果渲染到模板中：

<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：

<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` 元素。

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" 按钮。当我们点击该按钮时，代码文本就会被复制到剪贴板中。

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