├── .gitignore ├── .npmignore ├── README.md ├── directive.js ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue2-touch for Vue.js 2.x 2 | 3 | > This is a directive wrapper for Hammer.js 2.0, ~~small size(just 22.7k). 4 | 5 | ## Install 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install vue2-touch --save 10 | ``` 11 | 12 | ## Usage 13 | 14 | ### ES6 15 | 16 | ``` javascript 17 | import Vue2Touch from 'vue2-touch' 18 | Vue.use(Vue2Touch) 19 | ``` 20 | 21 | ### Add global Config 22 | 23 | ``` javascript 24 | Vue.use(Vue2Touch, { 25 | gestures: ['swipe'], 26 | directions: { 27 | swipe: ['swipeleft'] 28 | } 29 | }) 30 | ``` 31 | above configurations mean that it can override v-touch gestures which just listens to swipe event and override swipe directions which only listens to swipeleft event. 32 | 33 | ### Using the v-touch directive 34 | 35 | ``` html 36 | Tap me! 37 |
Swipe me!
38 | ``` 39 | 40 | 41 | ### callback 42 | Callback is a name of function with two args(can use any name, but type must be a funciton);the first argument can return a touch type(swipeleft,tap ...), and the second argument can return a callback event. 43 | 44 | ## More Details 45 | See [Hammer.js document](http://hammerjs.github.io/) 46 | 47 | ## License 48 | [MIT](https://opensource.org/licenses/MIT) 49 | -------------------------------------------------------------------------------- /directive.js: -------------------------------------------------------------------------------- 1 | import Hammer from 'hammerjs' 2 | var gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe'] 3 | var directions = { 4 | tap: ['tap'], 5 | swipe: ['swipeleft', 'swiperight', 'swipeup', 'swipedown'], 6 | pan: ['panstart', 'panmove', 'panend', 'pancancel', 'panleft', 'panright', 'panup', 'pandown'], 7 | pinch: ['pinchstart', 'pinchmove', 'pinchend', 'pinchcancel', 'pinchin', 'pinchout'], 8 | press: ['press', 'pressup'], 9 | rotate: ['rotatestart', 'rotatemove', 'rotateend', 'rotatecancel'] 10 | } 11 | 12 | function capitalize (str) { 13 | return str.charAt(0).toUpperCase() + str.slice(1) 14 | } 15 | var evt = null 16 | var handler = null 17 | var evtType = '' 18 | 19 | const touchs = { 20 | config: function (config) { 21 | if (config == null) return; 22 | if (config.gestures && (config.gestures instanceof Array)) gestures = config.gestures 23 | if (config.directions && (config.directions instanceof Array)) { 24 | for (let k in config.directions) { 25 | directions[k] = config.directions[k] 26 | } 27 | } 28 | }, 29 | bind: function(el, binding) { 30 | if (!evt) { 31 | evt = new Hammer.Manager(el) 32 | } 33 | var type = evtType = binding.arg.toLowerCase() 34 | var index = gestures.indexOf(type) 35 | if (index < 0) { 36 | console.warn('[vue2-touch] event type value is invalid') 37 | return 38 | } 39 | if (typeof binding.value !== 'function') { 40 | handler = null 41 | console.warn('[vue2-touch] invalid args value for v-touch, please check it') 42 | return 43 | } 44 | evt.add(new Hammer[capitalize(type)]()) 45 | // bind function 46 | var evtsArray = directions[evtType] 47 | if (handler) { 48 | evtsArray.forEach(function(et) { 49 | evt.off(et, function(e) { 50 | handler(et, e) 51 | }) 52 | }) 53 | } 54 | if (typeof binding.value === 'function') { 55 | handler = binding.value 56 | evtsArray.forEach(function(et) { 57 | evt.on(et, function(e) { 58 | handler(et, e) 59 | }) 60 | }) 61 | } 62 | }, 63 | unbind: function() { 64 | evt.destroy() 65 | evt = null 66 | } 67 | } 68 | export default touchs 69 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import touches from './directive' 2 | const vue2Touch = { 3 | install: function(Vue, options) { 4 | touches.config(options) 5 | Vue.directive('touch', touches) 6 | } 7 | } 8 | export default vue2Touch 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-touch", 3 | "description": "A directive wrapper Hammerjs for vue2.x", 4 | "version": "1.0.8", 5 | "author": "sam@thinkingsam.cn", 6 | "main": "index.js", 7 | "scripts": { 8 | }, 9 | "dependencies": { 10 | "hammerjs": "^2.0.8" 11 | }, 12 | "devDependencies": { 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/lenvonsam/vue2-touch.git" 17 | }, 18 | "keywords": [ 19 | "vue2-touch" 20 | ], 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/lenvonsam/vue2-touch/issues" 24 | }, 25 | "homepage": "https://github.com/lenvonsam/vue2-touch#readme" 26 | } 27 | --------------------------------------------------------------------------------