Exemple de point d'ancrage simulé vue2.0

Ci-dessous, je vais partager avec vous un exemple de point d'ancrage de simulation vue2.0, qui a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Dans le projet vue, en raison de l'utilisation de sauts de routage, il sera impossible d'utiliser la balise a régulière avec la fonction d'ancrage de l'ID.

Solution :

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

Mise à jour 17. 9. 20 : Ce qui précède a un BUG dans FireFox, le correctif est le suivant :

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Vue utilise des mixins pour implémenter du code d'image compressé

Internationalisation du projet Vue Installation et utilisation de vue-i18n Tutoriel

Diffusion et réception d'événements Vue2.0 (mode observateur)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!