vue mavon-editor 导航跳转（锚点跳转）

故事咱不缺

于 2022-04-01 23:05:18 发布

阅读量986

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_38667939/article/details/123908281

版权

该博客介绍了如何利用MavonEditor组件创建一个静态的页面导航。通过设置属性和监听`zuJianWD`变化，实现了将文章段落ID转化为锚点链接，方便页面内导航。代码示例展示了在Vue.js环境中配置和使用MavonEditor的过程。

摘要由CSDN通过智能技术生成

1安装

npm install mavon-editor --save

网址：官网

html

<mavon-editor

      v-if="zuJianWD"
      :editable="false"
      :value="zuJianWD"
      :subfield="false"
      :defaultOpen="'preview'"
      :toolbarsFlag="false"
      :scrollStyle="true"
      :ishljs="true"
      :navigation= "true"
      @navigationToggle	="onAddUrl"
    />
js

watch: {
    zuJianWD(){
      this.onAddUrl()
    }
  },

methods：{
onAddUrl(){
      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";
        }
      });
}