【优化】AI 抽离代码后,代码复制失效问题

This commit is contained in:
cherishsince 2024-05-17 16:12:32 +08:00
parent 0fef28e4a5
commit cfdceca9f3
2 changed files with 20 additions and 2 deletions

View File

@ -1,14 +1,19 @@
<template>
<div v-html="contentHtml"></div>
<div ref="contentRef" v-html="contentHtml"></div>
</template>
<script setup lang="ts">
import {useClipboard} from "@vueuse/core";
import {marked} from 'marked'
import 'highlight.js/styles/vs2015.min.css'
import hljs from 'highlight.js'
import {ref} from "vue";
const {copy} = useClipboard() // copy
const contentRef = ref()
// https://highlightjs.org/
// markdownmarked
@ -17,7 +22,7 @@ const renderer = {
code(code, language, c) {
const highlightHtml = hljs.highlight(code, {language: language, ignoreIllegals: true}).value
const copyHtml = `<div id="copy" data-copy='${code}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`
return `<pre>${copyHtml}<code class="hljs">${highlightHtml}</code></pre>`
return `<pre style="position: relative;">${copyHtml}<code class="hljs">${highlightHtml}</code></pre>`
}
}
@ -54,6 +59,18 @@ const renderMarkdown = async (content: string) => {
onMounted(async () => {
// markdown
await renderMarkdown(props.content as string);
//
// copy
contentRef.value.addEventListener('click', (e: any) => {
console.log(e)
if (e.target.id === 'copy') {
copy(e.target?.dataset?.copy)
ElMessage({
message: '复制成功!',
type: 'success'
})
}
})
})
</script>

View File

@ -202,6 +202,7 @@ onMounted(async () => {
}
.left-text-container {
position: relative;
display: flex;
flex-direction: column;
overflow-wrap: break-word;