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
  }
},
相关推荐
烟袅几秒前
告别 var!深入理解 JavaScript 中 var、let 和 const 的差异与最佳实践
javascript·面试
烛阴2 分钟前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智16 分钟前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front19 分钟前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
天一生水water1 小时前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节
无风听海1 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
冰夏之夜影1 小时前
【科普】Edge出问题后如何恢复出厂设置
前端·edge
W.Buffer2 小时前
设计模式-单例模式:从原理到实战的三种经典实现
开发语言·javascript·单例模式
葱头的故事2 小时前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节
Mintopia3 小时前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈