vue2.0模擬錨點的實例

下面我就為大家分享一篇vue2.0模擬錨點的實例，具有很好的參考價值，希望對大家有幫助。

在vue專案中，因為採用路由跳轉，會導致無法使用常規的a標籤來配合ID的錨點功能。

解決方法：

#

<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有BUG，修正如下：

##

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

#上面是我整理給大家的，希望未來對大家有幫助。

相關文章：

Vue使用mixins實作壓縮圖片程式碼

#vue專案國際化vue-i18n的安裝使用教學

Vue2.0 事件的廣播與接收(觀察者模式)

以上是vue2.0模擬錨點的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！