Vue 禁止跳转外部链接

一个富文本项目,在PC端输入超链接的时候,移动端webview中的H5会跳转到外部链接,可以通过遍历a链接加一个事件来禁止跳转。

<template>
    <div v-html="content"></div>
</template>

<script>
export default {
  data () {
    return {
      content: ''
    }
  },
  watch: {
    'content' () {
      let _this = this
      _this.$nextTick(() => {
        document.querySelectorAll('a').forEach((item) => {
          item.addEventListener('click', _this.linksPermissions)
        })
      })
    }
  },
  methods: {
    linksPermissions (e) {
      console.log('=== 禁止跳转外部链接 ===', e.target.href)
      e.stopPropagation()
      e.preventDefault()
    }
  },
  beforeDestroy () {
    let _this = this
    document.querySelectorAll('a').forEach((item) => {
      item.removeEventListener('click', _this.linksPermissions)
    })
  }
}
</script>

<style scoped lang="less"></style>

猜你喜欢

发表评论

最新发布