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
  }
},
相关推荐
有点笨的蛋6 小时前
从值拷贝到深拷贝:彻底弄懂 JavaScript 的堆与栈
前端·javascript
BBB努力学习程序设计6 小时前
CSS3选项卡:纯CSS实现优雅的内容切换
前端·html
有点笨的蛋6 小时前
从零掌握 Ajax:一次请求带你读懂异步数据加载原理
前端·javascript·ajax
进击的野人6 小时前
JavaScript日期操作与DOM节点管理:构建动态网页的核心技术
前端·javascript
BBB努力学习程序设计6 小时前
Canvas入门指南:从零开始绘制你的第一个图形
前端·html
AAA简单玩转程序设计6 小时前
JS防抖:别再让按钮“手抖”连点了!
前端·javascript·html
晚夏_八月6 小时前
ES6 模块导出 export default 与 export 的区别?
前端
皮蛋瘦肉粥_1216 小时前
pink老师html5+css3day09
前端·css3·html5
Mintopia7 小时前
🧠 可定制化 AIGC:Web 用户个性化模型训练的技术门槛正在塌缩!
前端·人工智能·trae
JarvanMo7 小时前
Flutter CI/CD 完整指南:从 Bitbucket Pipelines 到 Play Store 自动化部署
前端