对于本问题真的是研究了非常非常久!!!
解决方法一
给mavon-editor加一个超级高的高度。虽然能实现跳转,但是越往下跳转得就越不准确。
<mavon-editor
style="height:90000px"
v-model="context"
:toolbars="toolbars"
:defaultOpen="'preview'"
:editable="false"
:subfield="false"
@navigationToggle="addUrl"
/>
解决方法二(强烈推荐)
针对a标签进行锚点跳转,原来导航中的a标签结构比较奇怪,是这样的。a标签中只有id,没有href,而且文字是在a标签外的。
所以要完成以下任务:
- 给a标签添加上href,而且href的值就是id的值
- 把文字放进a标签中,并且把文字对象text去掉
addUrl() {
this.$nextTick(function () {
let _aList = document.querySelectorAll(".v-note-navigation-content a");
for (let i = 0; i < _aList.length; i++) {
let _aParent = _aList[i].parentNode;
let _a = _aParent.firstChild;
if (!_a.id) continue; // 把不属于导航中的a标签去掉,否则会报错
let _text = _aParent.lastChild;
let text = _text.textContent;
_a.href = "#" + _a.id;
_a.innerText = text;
_aParent.removeChild(_text);
// _a.style.color = "red";
}
});
},
<mavon-editor
style="height: 90000px"
v-model="context"
:toolbars="toolbars"
:defaultOpen="'preview'"
:editable="false"
:subfield="false"
@navigationToggle="addUrl"
/>
最后不要忘记给mavon-editor标签加上事件,监听导航打开的时候触发上述方法
心得体会:这个我真的研究到吐了,整整4小时才把这导航摸透。最后感谢CSDN某博主,看到它的文章才有所启发,但是找不到它的那篇文章了。