mavon-editor编辑器页面瞄点

# 获取页面所有的a标签

使用mavon-editor编辑器输出的html中，标题<h3><a id="npm__0"></a>npm 安装</h3>中会包含一个的a标签，a标签设置了唯一的id，这给我们进行网页瞄点提供了一个很好的思路，所以我们需要去获取a标签中的id，再渲染到页面上即可;

  data() {
    return {
      aData: [],  // 瞄点数据
    }
  },
  mounted() {
    listA();  // 获取页面所有a标签
  },
  methods: {
    listA() {
      this.aData = document.getElementsByTagName("a");
      console.log(this.aData);
      console.log(this.aData.length);
    }
  }

• 获取页面所有的a标签

这个时候我发现获取到的aData的长度的为0，这是因为vue还没渲染完成之前就调用了这个方法，页面渲染完成之前的页面是一片空白，所以获取到aData的长度的为0。
我们需要在vue渲染完成之后再调用这个方法即可;

  data() {
    return {
      aData: [],  // 瞄点数据
    }
  },
  mounted() {
    listA();  // 获取页面所有a标签
  },
  methods: {
    listA() {
      this.$nextTick(function () {
        let aData = document.getElementsByTagName("a");
        console.log(this.aData);
        console.log(this.aData.length);
      }
    }
  }

• this.$nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

# 获取a标签中的id和父节点的文字

  for(let i=0; i<document.getElementsByTagName("a").length; i++) {
    if (document.getElementsByTagName("a")[i].id !== '') {
      let aData = {
        'id' : document.getElementsByTagName("a")[i].id,  // 获取a标签的id
        'name' : document.getElementsByTagName("a")[i].parentNode.innerText  //
获取这个a标签父节点的文字（即我们的标题）
      };
      this.aData.splice(i, 1, aData);
    }
  }

# 渲染到页面上

  <div v-for="item in aData">
    <p><a :href="'#' + item.id">{{item.name}}</a></p>
  </div>

瞄点功能已经实现，这个时候我发现当点击a标签瞄点的时候会改变地址栏的url，这个很明显是不对的;

解决思路：那就不通过a标签href来跳转

  <div v-for="item in aData">
    <p @click="url(item.id)">
      <a href="javascript:void(0);">{{item.name}}</a>
    </p>
  </div>

  url(url) {
    document.querySelector('#' + url).scrollIntoView(true);
  },

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

# 优化渲染到页面上视觉体验

  <el-card shadow="never" id="directoryDiv">
    <div slot="header"><b>目录</b></div>
    <div v-for="(item, index) in aData">
      <p @click="url(item.id)"><a href="javascript:void(0);">{{index}}、{{item.name}}</a></p>
    </div>
  </el-card>

  data() {
    return {
      aData: [],  // 瞄点数据
    }
  },
  mounted() {
    /*
    * window添加一个滚动监听事件
    * */
    window.addEventListener("scroll", this.directory);
  },
  methods: {
     /*
      * 控制侧边目录的位置
      * */
      directory() {
        var top=document.documentElement.scrollTop||document.body.scrollTop;
        var directoryDiv=document.getElementById("directoryDiv");
        if(top>= 164){
          directoryDiv.style.position = "fixed";
          directoryDiv.style.top = "50px";
          directoryDiv.style.width = "229.313px";
      }else{
        directoryDiv.style.position = "absolute";
        directoryDiv.style.top = "0px";
        directoryDiv.style.width = "229.313px";
      }
    }
  },
  /*
   * 离开该页面，就要移除这个监听事件，不然会报错
  * */
  destroyed() {
    window.removeEventListener("scroll", this.directory);
  }

# 踩坑

点击瞄点的时候报错如下

Failed to execute 'querySelector' on 'Document': '#4_indexhtml__118' is not a valid selector.

这是因为需要跳转的瞄点第一个字不能出现数字，上面报错中指出了#4_indexhtml__118中第一个是数字，所以在定义标题的时候第一个字不要出现数字;