[前端史萊姆與Vue的三十天時光冒險]Day29 Vue CLI專案實作(三)：VueScrollTo套件應用

好像漸漸的有點樣子了？

嗨~今天要來說說實作vue-scrollto 的過程。記得在D22的時候因為無法順利套用，所以很偷懶的直接採用JQuery的方法了。

既然都洗了一半的Vue CLI專案，就來直接試試vue-scrollto套件的實作吧！

NPM安裝

利用下列程式碼在專案中安裝vue-scrollto套件

npm install --save vue-scrollto

基礎設定

我這次是選擇在main.js中直接加入設定，當然也可以另外開一個js檔案新增設定。

首先在檔案中引入vue-scrollto的js檔案，並使用Vue.use(VueScrollTo)啟用套件

var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)

或者也可以直接寫入基礎設定，如下範例：

Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     force: true,
     cancelable: true,
     onStart: false,
     onDone: false,
     onCancel: false,
     x: false,
     y: true
 })

詳細參數說明可以參考官方文件。

增加點擊事件

最後在banner.vue中的ScrollDown連結中增加套件自定義的點擊事件方法

v-scroll-to="'#section-rooms'"  //點擊後滑到#section-rooms

這樣就完成囉！

PS.實作的時候不甘心又在原本專案試了一次CDN的方法，發現是可以正常使用的。只是我一開始使用時少添加了Vue.use(VueScrollTo)這個指令啊...

今天就先跟大家分享到這兒，明天就是最後一天啦~

你有更多的問題嗎？你有什麼建議呢？
歡迎在下方留言，或加入我的臉書粉絲頁一起討論！

【免費支持】如果你幫我拍手5下，我有機會得到內容創作的酬勞🙂