alloyfinger
Version:
super tiny size multi-touch gestures library for the web.
74 lines (71 loc) • 2.36 kB
HTML
<html>
<head>
<title>test for vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div id="cnt">
<div v-if="ok"
v-finger:tap="tap"
v-finger:multipoint-start="multipointStart"
v-finger:long-tap="longTap"
v-finger:swipe="swipe"
v-finger:pinch="pinch"
v-finger:rotate="rotate"
v-finger:press-move="pressMove.bind(this, 12)"
v-finger:multipoint-end="multipointEnd"
v-finger:double-tap="doubleTap"
v-finger:single-tap="singleTap"
v-finger:touch-start="touchStart"
v-finger:touch-move="touchMove"
v-finger:touch-end="touchEnd"
v-finger:touch-cancel="touchCancel"
>
<div>the element that you want to bind event</div>
</div>
</div>
<script type="text/javascript" src="./vue.min.js"></script>
<script type="text/javascript" src="../../../alloy_finger.js"></script>
<script type="text/javascript" src="../../alloy_finger.vue.js"></script>
<script type="text/javascript">
Vue.use(AlloyFingerVue);
var data = {
ok: true
};
var h = new Vue({
el: '#cnt',
data: data,
methods: {
tap: function() { console.log('onTap'); },
multipointStart: function() { console.log('onMultipointStart'); },
longTap: function() { console.log('onLongTap'); },
swipe: function(evt) {
console.log("swipe" + evt.direction);
console.log('onSwipe');
},
pinch: function(evt) {
console.log(evt.scale);
console.log('onPinch');
},
rotate: function(evt) {
console.log(evt.angle);
console.log('onRotate');
},
pressMove: function(num, evt) {
console.log(evt.deltaX);
console.log(evt.deltaY);
console.log('onPressMove with params:' + num);
},
multipointEnd: function() { console.log('onMultipointEnd'); },
doubleTap: function() { console.log('onDoubleTap'); },
singleTap: function () { console.log('onSingleTap'); },
touchStart: function() { console.log('onTouchStart'); },
touchMove: function() { console.log('onTouchMove'); },
touchEnd: function() { console.log('onTouchEnd'); },
touchCancel: function() { console.log('onTouchCancel'); }
}
});
</script>
</body>
</html>