Vue 项目中 marked.js 怎么定制链接的点击行为

程序员白彬

已于 2024-08-06 11:15:57 修改

阅读量714

点赞数 3

文章标签： vue.js javascript

于 2024-07-28 11:16:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41196185/article/details/140748226

版权

在 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 的渲染器。

选择哪种方法主要取决于你的具体需求和项目结构。如果你需要在多个组件中重用这个功能，你可能想要创建一个可重用的组件或指令。

加入交流群