本文同步發表於斜槓女紙部落格:Day29 Vue CLI專案實作(三):VueScrollTo套件應用
嗨~今天要來說說實作vue-scrollto 的過程。記得在D22的時候因為無法順利套用,所以很偷懶的直接採用JQuery
的方法了。
既然都洗了一半的Vue CLI
專案,就來直接試試vue-scrollto套件的實作吧!
利用下列程式碼在專案中安裝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)
這個指令啊...
今天就先跟大家分享到這兒,明天就是最後一天啦~