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
  }
},
相关推荐
嘤嘤怪呆呆狗10 分钟前
【插件】vscode Todo Tree 简介和使用方法
前端·ide·vue.js·vscode·编辑器
大今野16 分钟前
node.js和js
开发语言·javascript·node.js
ᥬ 小月亮23 分钟前
Js前端模块化规范及其产品
开发语言·前端·javascript
码小瑞38 分钟前
某些iphone手机录音获取流stream延迟问题 以及 录音一次第二次不录音问题
前端·javascript·vue.js
weixin_18940 分钟前
‌Vite和Webpack区别 及 优劣势
前端·webpack·vue·vite
半吊子伯爵41 分钟前
开发过程优化·自定义鼠标右键菜单
前端·javascript·自定义鼠标右键菜单
xcLeigh44 分钟前
HTML5实现好看的喜庆圣诞节网站源码
前端·html·html5
Tirzano1 小时前
vue3 ts 简单动态表单 和表格
前端·javascript·vue.js
杰~JIE1 小时前
前端工程化概述(初版)
前端·自动化·工程化·前端工程化·sop
程序员_三木1 小时前
使用 Three.js 创建圣诞树场景
开发语言·前端·javascript·ecmascript·three