在 Vue 3 组件中使用 marked.js 并定义有效的 handleLinkClick 函数，你可以采用以下几种方法：
- 使用组件方法和全局函数
在你的 Vue 组件中定义 handleLinkClick 方法，然后将其暴露到全局作用域：
<template><div v-html="renderedMarkdown"></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import { marked } from 'marked';const renderedMarkdown = ref('');const handleLinkClick = (event, href) => {event.preventDefault();// 在这里实现你的自定义行为console.log('Link clicked:', href);
};// 将方法暴露到全局作用域
window.handleLinkClick = handleLinkClick;onMounted(() => {const renderer = new marked.Renderer();renderer.link = (href, title, text) => {return `<a href="${href}" οnclick="handleLinkClick(event, '${href}')">${text}</a>`;};marked.setOptions({ renderer });// 假设你有一个 markdown 字符串const markdown = '# Hello\n[Link](http://example.com)';renderedMarkdown.value = marked(markdown);
});
</script>
- 使用自定义指令
你可以创建一个自定义指令来处理链接点击：
<template><div v-html="renderedMarkdown" v-handle-links></div>
</template><script setup>
import { ref, onMounted, directive } from 'vue';
import { marked } from 'marked';const renderedMarkdown = ref('');const handleLinkClick = (event, href) => {event.preventDefault();// 在这里实现你的自定义行为console.log('Link clicked:', href);
};const vHandleLinks = directive({mounted(el) {el.addEventListener('click', (event) => {if (event.target.tagName === 'A') {handleLinkClick(event, event.target.href);}});}
});onMounted(() => {// 假设你有一个 markdown 字符串const markdown = '# Hello\n[Link](http://example.com)';renderedMarkdown.value = marked(markdown);
});
</script>
- 使用 Vue 的
v-html和事件委托
你可以在包含渲染后 Markdown 的元素上使用事件委托：
<template><div v-html="renderedMarkdown" @click="handleClick"></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import { marked } from 'marked';const renderedMarkdown = ref('');const handleClick = (event) => {if (event.target.tagName === 'A') {event.preventDefault();const href = event.target.href;// 在这里实现你的自定义行为console.log('Link clicked:', href);}
};onMounted(() => {// 假设你有一个 markdown 字符串const markdown = '# Hello\n[Link](http://example.com)';renderedMarkdown.value = marked(markdown);
});
</script>
这些方法中，第二种和第三种更符合 Vue 的组件化思想，因为它们不依赖于全局函数。第三种方法特别简洁，因为它不需要修改 marked.js 的渲染器。
选择哪种方法主要取决于你的具体需求和项目结构。如果你需要在多个组件中重用这个功能，你可能想要创建一个可重用的组件或指令。
)
