公司有一个特定场景:点击新闻列表中的某一项,然后在弹出框内展示新闻详情。即:新闻列表为父组件,弹框为子组件。内容详情以传值的方式给到子组件。但是内容中有很多a标签,点击后会直接跳转。业务逻辑需要阻止跳转使a链接失效
第一种方法: 在子组件内监听父组件传递过来的值。手动修改dom元素将a链接的onclick事件return flase
<template>
<div class="c-s-box">
<div class="c-s-title">新闻详情</div>
<div class="c-d-content">
<p class="new-c-title" v-text="propsObj.title"></p>
<p class="new-c-summary" v-text="propsObj.summary"></p>
<p class="new-c-content" v-html="propsObj.htmlContent"></p>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data() {
return {
}
},
methods: {
preventAclick(){
let aTagBox = window.document.getElementsByClassName("new-c-content")