Beispiel eines vue2.0 simulierten Ankerpunkts

Im Folgenden werde ich Ihnen ein Beispiel für einen vue2.0-Simulationsankerpunkt mitteilen, der einen guten Referenzwert hat und ich hoffe, dass er für alle hilfreich sein wird.

Im Vue-Projekt ist es aufgrund der Verwendung von Routing-Sprüngen unmöglich, das reguläre A-Tag mit der Ankerfunktion der ID zu verwenden.

Lösung:

<a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(&#39;#anchor&#39;)"> 灰啊灰啊我的骄傲放纵</a>

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop
 }
}

17. 9. 20 Update: Das Obige hat einen FEHLER in Firefox, der Fix ist wie folgt:

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop; // chrome
  document.documentElement.scrollTop = anchor.offsetTop; // firefox
 }
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Vue verwendet Mixins, um komprimierten Bildcode zu implementieren

Vue-Projekt Internationalisierung vue-i18n Installation und Verwendung Tutorial

Übertragung und Empfang von Vue2.0-Ereignissen (Beobachtermodus)

Das obige ist der detaillierte Inhalt vonBeispiel eines vue2.0 simulierten Ankerpunkts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!