vue3 如何实现页面展示 HTML代码的一键复制

问题描述

在vue如何实现页面展示带script标签的HTML代码一文中成功实现了在页面展示HTML代码。如下图所示：

 在右下角有一个copy按钮，点击这个按钮能够复制展示的这段HTML代码。

实现

大致步骤在vue3如何实现文本的一键复制 中体现。复制html代码只是稍微复有点不一样。

1. 准备markdown文档

2. 装包

npm i vue-clipboard3
npm i marked

3. 引入

// 模板
<div class="dialog-code">
    <div v-highlight id="code-content" class="text" v-html="article"></div>
</div>
 
 
// js 
import { marked } from "marked";
import markdown from "./codeView.md?raw"; // 引入 markdown 文档
import clipBoard from "vue-clipboard3";
let { toClipboard } = clipBoard(); // 一键复制

const article = ref(""); // 弹窗代码展示
article.value = marked(markdown);
// 一键复制
const handleCopy = async () => {
  try {
    await toClipboard(markdown);
    console.log("success");
    ElMessage({
      message: "Copy",
      type: "success",
    });
  } catch (e) {
    ElMessage({
      message: e,
      type: "error",
    });
  }
};