feat: 修改v-touch结构, 所有手势均通过v-on绑定, 同时增加单元测试100%

__tests__/vue/v-touch.spec.ts

@@ -0,0 +1,117 @@
+import Vue from 'vue';
+import TouchSimulator from '../utils/TouchSimulator';
+import sleep from '../utils/sleep';
+import AnyTouch from '../../src/main';
+
+let el: HTMLElement;
+
+beforeEach(() => {
+    el = document.createElement('div');
+    Vue.config.devtools = false;
+    Vue.config.productionTip = false;
+    Vue.use(AnyTouch.vTouch);
+});
+
+test('v-touch没有导出情况下, 是否运行正常以及销毁功能正常?', async (done) => {
+    const mockCallback = jest.fn();
+    new Vue({
+        el,
+
+        data: {
+            hasTouch: true
+        },
+
+        render(h) {
+            if (!this.hasTouch) return h();
+            return h('div', {
+                ref: 'box',
+                on: {
+                    tap(ev: any) {
+                        mockCallback();
+                        expect(ev.type).toBe('tap');
+                    }
+                },
+                directives: [{
+                    name: 'touch'
+                }]
+            });
+        },
+
+        async mounted() {
+            const boxEl: any = this.$refs.box;
+            const ts = new TouchSimulator(boxEl);
+            // 模拟touch触碰
+            ts.dispatchTouchStart([{ x: 0, y: 0 }]);
+            await sleep(100);
+            ts.dispatchTouchEnd();
+            await sleep(100);
+
+            // 销毁box元素
+            this.hasTouch = false;
+            // 模拟touch触碰
+            ts.dispatchTouchStart([{ x: 0, y: 0 }]);
+            await sleep(100);
+            ts.dispatchTouchEnd();
+            await sleep(100);
+
+            expect(mockCallback.mock.calls.length).toBe(1);
+            done()
+        }
+    });
+});
+
+
+test('v-touch导出,并设置requireFailure', async (done) => {
+    const mockCallback = jest.fn();
+    new Vue({
+        el,
+
+        data:{
+            gesture: ''
+        },
+
+        render(h) {
+            return h('div', {
+                ref: 'box',
+                on: {
+                    tap(ev: any) {
+                        mockCallback();
+                    },
+
+                    doubletap:(ev: any)=> {
+                        mockCallback();
+                        this.gesture = ev.type;
+                        expect(ev.type).toBe('doubletap');
+                    },
+                },
+                directives: [{
+                    name: 'touch',
+                    value(at:any){
+                        const doubletap = at.get('doubletap');
+                        doubletap.disabled = false;
+                        at.get('tap').requireFailure(doubletap);
+                    }
+                }]
+            }, [this.gesture]);
+        },
+
+        async mounted() {
+            const boxEl: any = this.$refs.box;
+            const ts = new TouchSimulator(boxEl);
+            // 模拟touch触碰
+            ts.dispatchTouchStart([{ x: 0, y: 0 }]);
+            await sleep(100);
+            ts.dispatchTouchEnd();
+            await sleep(100);
+
+            // 模拟touch触碰
+            ts.dispatchTouchStart([{ x: 0, y: 0 }]);
+            await sleep(100);
+            ts.dispatchTouchEnd();
+            await sleep(100);
+
+            expect(mockCallback.mock.calls.length).toBe(1);
+            done()
+        }
+    });
+});

example/index.js

@@ -16,17 +16,6 @@ new Vue({
         };
     },
     mounted() {
-        // const atBox = new AnyTouch(this.$refs.box, {
-        //     touchAction: 'auto',
-        //     isPreventDefault: false
-        // });
-
-        // atBox.on('panmove', ev => {
-        //     console.log('atBox');
-        // })
-// console.log(AnyTouch.vTouch);
-
-
         this.$refs.circle.addEventListener('animationend', e=>{
             this.activeType = 'AnyTouch';
         });
@@ -72,17 +61,17 @@ new Vue({
             threshold: 15
         });
 
-        anyTouch.add(pan2);
-        anyTouch.add(tap2);
-        anyTouch.add(tap3);
-        anyTouch.add(tap4);
-        const tap1 = anyTouch.get('tap');
-        tap1.requireFailure(tap2);
-        tap1.requireFailure(tap3);
-        tap1.requireFailure(tap4);
-        tap2.requireFailure(tap3);
-        tap2.requireFailure(tap4);
-        tap3.requireFailure(tap4);
+        // anyTouch.add(pan2);
+        // anyTouch.add(tap2);
+        // anyTouch.add(tap3);
+        // anyTouch.add(tap4);
+        // const tap1 = anyTouch.get('tap');
+        // tap1.requireFailure(tap2);
+        // tap1.requireFailure(tap3);
+        // tap1.requireFailure(tap4);
+        // tap2.requireFailure(tap3);
+        // tap2.requireFailure(tap4);
+        // tap3.requireFailure(tap4);
         // this.$refs.circle.addEventListener('touchstart', ev=>{ev.preventDefault()})
         // this.$refs.circle.addEventListener('touchmove', ev=>{ev.preventDefault()})
         // this.$refs.circle.addEventListener('touchend', ev=>{ev.preventDefault()})

example/vue/index.html

@@ -10,23 +10,21 @@
     <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
     <script src="../../dist/AnyTouch.umd.js"></script>
     <style>
-        body{margin:0;}
+        body {
+            margin: 0;
+        }
+
         .box {
             padding: 100px;
-            margin:30px;
+            margin: 30px;
             background: #ccc;
         }
     </style>
 </head>
 
 <body>
     <main id="app">
-        <div 
-            v-touch:pan-config="{abc:123}"
-            v-touch:pan.prevent="panHandler" 
-            @tap.prevent="tapHandler"
-            @click="clickHandler"
-            v-touch:swipe="swipeHandler"
+        <div v-touch="importAT" @tap="tapHandler" @doubletap="doubletapHandler" @click="clickHandler"
             class="box">{{msg}}</div>
     </main>
     <script>
@@ -36,27 +34,41 @@
             el: '#app',
             data() {
                 return {
-                    anyTouch:null,
-                    msg: 1234567890
+                    anyTouch: null,
+                    msg: 'AnyTouch'
                 };
             },
-            mounted(){
 
-            },
             methods: {
-                clickHandler(){
-                    console.log('click');
+                importAT(at) {
+                    const dt = at.get('doubletap')
+                    dt.disabled = false
                 },
-                swipeHandler(ev){
+
+                clickHandler(ev) {
                     console.log(ev.type);
+                    this.msg = 'click';
+                },
+                swipeHandler(ev) {
+                    console.log(ev.type);
+                    this.msg = ev.type;
                 },
 
                 panHandler(ev) {
                     console.log(ev.type);
+                    this.msg = ev.type;
+                },
+
+                tapHandler(ev) {
+                    ev.preventDefault();
+                    console.log(ev.type);
+                    this.msg = ev.type;
                 },
 
-                tapHandler(ev){
+                doubletapHandler(ev) {
+                    ev.preventDefault();
                     console.log(ev.type);
+                    this.msg = ev.type;
                 }
             }
         })

src/main.ts

@@ -1,4 +1,4 @@
-import {AnyTouch} from './AnyTouch';
+import { AnyTouch } from './AnyTouch';
 import VueDirective from './vueDirective';
 export default class extends AnyTouch {
     // vue指令版

src/vueDirective/index.ts

@@ -12,34 +12,9 @@ const plugin = {
     install(Vue: VueConstructor) {
         const _bindEvent = (el: HTMLElement, binding: any) => {
             let instance = iManage.getOrCreateInstanceByEl(el);
-            // 匹配AnyTouch设置
-            if ('config' === binding.arg) {
-                instance.set(binding.value);
-            }
-
-            // 匹配手势, 无"-""
-            else if (/^((?!-).)*$/.test(binding.arg)) {
-                // console.log(binding.modifiers);
-                // 绑定事件
-                instance.on(binding.arg, (ev: Computed) => {
-                    if (!!binding.modifiers.preventDefault) {
-                        if (binding.modifiers.prevent) {
-                            ev.preventDefault();
-                        }
-                    }
-                    // if (binding.modifiers.self && el !== e.target) return;
-                    binding.value(ev);
-                });
-            }
-            // 匹配手势设置
-            else if (/\-config$/.test(binding.arg)) {
-                const gestureName = binding.arg.replace('-config', '');
-                instance.get(gestureName).set(binding.value)
-            }
-            // 匹配requireFailure
-            else if (/\-require-failure/.test(binding.arg)) {
-                const gestureNames = binding.arg.split('-require-failure-');
-                instance.get(gestureNames[0]).requireFailure(gestureNames[1]);
+            // 导入AnyTouch实例
+            if (undefined !== binding.value) {
+                binding.value(instance);
             }
         };
 
@@ -72,9 +47,12 @@ const plugin = {
     }
 };
 
+// if('test' !== process.env.NODE_ENV){
+
+// }
 // 自动加载插件
-if (typeof <any>window !== 'undefined' && (<any>window).Vue) {
-    (<any>window).Vue.use(plugin);
-};
+// if (typeof <any>window !== 'undefined' && (<any>window).Vue) {
+//     (<any>window).Vue.use(plugin);
+// };
 
 export default plugin;