vue2.0でシミュレートされたアンカーポイントの例

ここで、vue2.0 シミュレーションのアンカー ポイントの例を共有します。これは、良い参考値であり、皆さんの役に立つことを願っています。

vueプロジェクトではルーティングジャンプを使用するため、IDのアンカー機能で通常のaタグを使用することができなくなります。

解決策:

<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 更新: 上記には FireFox のバグがあります。修正は次のとおりです。

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

以上、皆さんのためにまとめてみましたので、今後皆さんのお役に立てれば幸いです。

関連記事:

Vue はミックスインを使用して圧縮画像コードを実装します

vue プロジェクトの国際化 vue-i18n のインストールと使用チュートリアル

Vue2.0 イベントのブロードキャストと受信 (オブザーバー モード)

以上がvue2.0でシミュレートされたアンカーポイントの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。