Vue 2.0 手勢是一個基于 Hammer.js 和 Vue.js 封裝的輕量級插件,它可以讓我們在 Vue 中更加便捷地處理各種手勢操作。
在使用前,我們需要先安裝vue-gesture
插件:
npm install vue-gesture --save
安裝完成后,在需要使用的 Vue 組件中引入模塊:
import VueGesture from 'vue-gesture'
接著在組件選項中添加directives
屬性,將v-gesture
指令注冊進來。
directives: {
gesture: VueGesture.directive
}
然后就可以在組件的 DOM 元素上使用v-gesture
指令,來綁定各種手勢事件。
比如,我們可以監(jiān)聽單指拖拽事件:
<div v-gesture:drag="onDrag"></div>
methods: {
onDrag: function (event) {
// event.deltaX 代表橫向移動距離
// event.deltaY 代表縱向移動距離
}
}
還可以監(jiān)聽雙指縮放事件:
<div v-gesture:pinch="onPinch"></div>
methods: {
onPinch: function (event) {
// event.scale 代表當前縮放比例
// event.deltaScale 代表相對于上次縮放比例的變化值
}
}
更多手勢事件和參數(shù),可以查看Hammer.js 文檔。
上一篇python 并集 符號
下一篇python 幻燈片