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
  }
},
相关推荐
dal118网工任子仪6 小时前
93,【1】buuctf web [网鼎杯 2020 朱雀组]phpweb
android·前端
赛博末影猫7 小时前
Spring理论知识(Ⅴ)——Spring Web模块
java·前端·spring
GISer_Jing8 小时前
DeepSeek 阐述 2025年前端发展趋势
前端·javascript·react.js·前端框架
prince_zxill8 小时前
RESTful 架构原则及其在 API 设计中的应用
前端·javascript·架构·前端框架·restful
禁默8 小时前
【学术投稿-2025年计算机视觉研究进展与应用国际学术会议 (ACVRA 2025)】从计算机基础到HTML开发:Web开发的第一步
前端·计算机视觉·html
Anlici10 小时前
强势DeepSeek——三种使用方式+推理询问指令😋
前端·人工智能·架构
geovindu10 小时前
D3.js Org Chart
开发语言·javascript·ecmascript
疋瓞10 小时前
excel实用问题:提取文字当中的数字进行运算
java·javascript·excel
CodeClimb11 小时前
【华为OD-E卷 - 任务最优调度 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
Chaoran11 小时前
vue3 封装右键菜单组件
前端·javascript