├── .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 |
--------------------------------------------------------------------------------