vue 拦截 v-html 中 a 标签 href 跳转

记录

template 中 给需要 拦截的 代码片段加上click 方法 @click="targetNodeNameClick"

html 复制代码
 <p class="message-content message-content-text" v-html="replaceURLWithHTMLLinks(getText(message))"  @click="targetNodeNameClick"></p>

然后方法的代码:如有参考,有业务代码自行理解。

javascript 复制代码
// 拦截 v-html 中 a 标签 href 跳转
targetNodeNameClick(event) {
  if (event.target.nodeName == "A") {
    event.preventDefault();
    // 使用浏览器打开
    let url = event.target.getAttribute('href')
    if (url) {
      if (url && url.substring(0, 1) === '/') {
        url = `${process.env.VUE_APP_BASE_URL}${url}`
      }
      this.$ipcInvoke(ipcApiRoute.openDefaultBrowser, url)
    }
    return false
  }
},
相关推荐
小沐°几秒前
vue3-ElementPlus出现Uncaught (in promise) cancel 报错
前端·javascript·vue.js
栀秋6663 分钟前
LangChain Memory 实战指南:让大模型记住你每一句话,轻松打造“有记忆”的AI助手
javascript·langchain·llm
四瓣纸鹤5 分钟前
F2图表在Vue3中的使用方法
前端·javascript·vue.js·antv/f2
それども12 分钟前
浏览器CSR和SSR渲染区别
javascript·lua
web前端12312 分钟前
# @shopify/react-native-skia 完整指南
前端·css
shanLion13 分钟前
从 iframe 到 Shadow DOM:一次关于「隔离」的前端边界思考
前端·javascript
精神状态良好15 分钟前
RAG 是什么?如何让大模型基于文档作答
前端
CRAB16 分钟前
解锁移动端H5调试:Eruda & VConsole 实战指南
前端·debug·webview
OpenTiny社区16 分钟前
Vue2/Vue3 迁移头秃?Renderless 架构让组件 “无缝穿梭”
前端·javascript·vue.js
敲代码的独角兽16 分钟前
深入理解 JavaScript 异步机制:从回调到 Promise 再到 async/await
前端