punto de página del editor mavon-editor

# Obtenga todas las etiquetas de la página

En la salida html del editor mavon-editor, el título <h3><a id="npm__0"></a>npm 安装</h3>contendrá una etiqueta a, que establece una identificación única, que nos proporciona una buena idea para la orientación de la página web, por lo que necesitamos obtener la etiqueta a La identificación en la página se puede representar en la página;

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

• Obtenga todas las etiquetas en la página

En este momento, descubrí que la aDatalongitud obtenida es 0. Esto se debe a que este método se llama antes de que se complete el procesamiento de vue. La página antes de completar el procesamiento de la página está en blanco, por lo que la aDatalongitud obtenida es 0.
Necesitamos llamar a este método después de que se complete el renderizado 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);
      }
    }
  }

• esto. $ nextTick () es para retrasar la función de devolución de llamada que se llamará después de los siguientes datos de actualización de dom. La comprensión simple es: cuando los datos se actualizan, después de renderizar en el dom, la función se ejecuta automáticamente

# Obtenga la identificación de la etiqueta y el texto del nodo primario

  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);
    }
  }

# Renderizar a la página

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

Se ha implementado la función de puntería. En este momento, descubrí que al hacer clic en el punto de puntería de una etiqueta, la URL de la barra de direcciones cambiará. Esto obviamente es incorrecto;

Idea de solución: entonces no salte a través de una etiqueta 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);
  },

El método querySelector () devuelve un elemento en el documento que coincide con el selector CSS especificado.

# Optimizar la experiencia visual de renderizar en la página

  <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);
  }

# Paso en el hoyo

El error se informa de la siguiente manera al hacer clic en el punto de puntería

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

Esto se debe a que la primera palabra del punto de puntería que se debe saltar no puede tener un número. El #4_indexhtml__118primer error en el error anterior indica que el número es un número, por lo que no debe aparecer el número en la primera palabra al definir el título;