Fastclick是一個解決移動端點擊事件300ms延遲的JavaScript庫,使用簡單方便,但其原本并不支持Vue框架的模板渲染,因此需要在組件內部手動加上fastclick的調用,不方便也容易出錯。而現在,Fastclick官方已經推出一份支持Vue框架的fastclick版本,提供了插件的形式,我們可以通過Vue.use()來安裝,從而方便的進行全局使用。下面我們來看下具體的使用方法:
首先,我們需要先安裝fastclick,進入命令行并輸入如下命令:
npm install fastclick --save
安裝完成后,我們可以嘗試在組件內部進行使用,例如:
import FastClick from 'fastclick' export default { mounted() { FastClick.attach(document.body) } }
但如果需要在多個組件中使用,每個組件內部將Fastclick實例化并使用,勢必會造成代碼的冗長而且難以維護。此時,我們可以選擇使用Vue插件的形式來避免這些問題。
我們在main.js中注冊fastclick插件:
import FastClick from 'fastclick' import Vue from 'vue' Vue.use(FastClick)
這樣,我們便完成了Fastclick插件的全局注冊。現在,我們不需要在單獨的組件內部再進行手動調用了。我們只需要在組件中正常書寫即可,例如:
現在,我們可以愉快的使用Fastclick來加速移動端的響應速度了!