vue3。。

vue3页面高亮显示代码片段

安装 highlight.js
npm install --save-dev highlight.js
main.js
// 高亮显示代码片段

import { createApp } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
const app = createApp(App)
app.use((app) => {
    app.directive('highlight', {
        // 高亮显示
        mounted(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                hljs.highlightElement(blocks[i]);
            }
        }
    })
})

页面中使用：

 <prev-highlight><code :class="type">{{resArr }}</code></pre>

data() {
    return {
        type:'html',
      resArr: `<el-tab-pane label="HTML" name="first">
         <div class="code">
           HTML Code
          </div>
          <div class="intro">
            业务简介：这是一段html代码简介！
          </div>
        </el-tab-pane>`,
      },
    };

vue中使用copy功能

安装 npm install --save-dev clipboard
页面中使用

<div @click="copy($event, '<a>aaaa</a>'">
  复制
 </div>

import Clipboard from "clipboard";
methods:{
copy(e, text ) {
      const clipboard = new Clipboard(e.target, { text: () => text });
      clipboard.on("success", (e) => {
       //使用的是@arco-design/web-vue插件
        this.$message.success("复制成功");
        // 释放内存
        clipboard.off("error");
        clipboard.off("success");
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message.success;
         //使用的是@arco-design/web-vue插件
        this.$message.warning("该浏览器不支持自动复制");
        // 释放内存
        clipboard.off("error");
        clipboard.off("success");
        clipboard.destroy();
      });
      clipboard.onClick(e);
    },
 }