From 42058ee800418a607b867f47b8ffb46319405191 Mon Sep 17 00:00:00 2001
From: kingwl <wenlu.wang@chaitin.com>
Date: Mon, 6 Feb 2017 19:46:48 +0800
Subject: [PATCH] support mouse event modifier

---
 src/compiler/codegen/events.js           |  5 ++-
 test/unit/features/directives/on.spec.js | 43 ++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/compiler/codegen/events.js b/src/compiler/codegen/events.js
index f4a2dffca38..eaf9c6ac3df 100644
--- a/src/compiler/codegen/events.js
+++ b/src/compiler/codegen/events.js
@@ -23,7 +23,10 @@ const modifierCode: { [key: string]: string } = {
   ctrl: 'if(!$event.ctrlKey)return;',
   shift: 'if(!$event.shiftKey)return;',
   alt: 'if(!$event.altKey)return;',
-  meta: 'if(!$event.metaKey)return;'
+  meta: 'if(!$event.metaKey)return;',
+  left: 'if($event.button !== 0)return;',
+  middle: 'if($event.button !== 1)return;',
+  right: 'if($event.button !== 2)return;'
 }
 
 export function genHandlers (events: ASTElementHandlers, native?: boolean): string {
diff --git a/test/unit/features/directives/on.spec.js b/test/unit/features/directives/on.spec.js
index 67d9a7801c0..f9e10cbe663 100644
--- a/test/unit/features/directives/on.spec.js
+++ b/test/unit/features/directives/on.spec.js
@@ -197,6 +197,49 @@ describe('Directive v-on', () => {
     expect(spy).toHaveBeenCalled()
   })
 
+  it('should support mouse modifier', () => {
+    const left = 0
+    const middle = 1
+    const right = 2
+    const spyLeft = jasmine.createSpy()
+    const spyMiddle = jasmine.createSpy()
+    const spyRight = jasmine.createSpy()
+
+    vm = new Vue({
+      el,
+      template: `
+        <div>
+          <div ref="left" @mousedown.left="foo">left</div>
+          <div ref="right" @mousedown.right="foo1">right</div>
+          <div ref="middle" @mousedown.middle="foo2">right</div>
+        </div>
+      `,
+      methods: {
+        foo: spyLeft,
+        foo1: spyRight,
+        foo2: spyMiddle
+      }
+    })
+
+    triggerEvent(vm.$refs.left, 'mousedown', e => { e.button = right })
+    triggerEvent(vm.$refs.left, 'mousedown', e => { e.button = middle })
+    expect(spyLeft).not.toHaveBeenCalled()
+    triggerEvent(vm.$refs.left, 'mousedown', e => { e.button = left })
+    expect(spyLeft).toHaveBeenCalled()
+
+    triggerEvent(vm.$refs.right, 'mousedown', e => { e.button = left })
+    triggerEvent(vm.$refs.right, 'mousedown', e => { e.button = middle })
+    expect(spyRight).not.toHaveBeenCalled()
+    triggerEvent(vm.$refs.right, 'mousedown', e => { e.button = right })
+    expect(spyRight).toHaveBeenCalled()
+
+    triggerEvent(vm.$refs.middle, 'mousedown', e => { e.button = left })
+    triggerEvent(vm.$refs.middle, 'mousedown', e => { e.button = right })
+    expect(spyMiddle).not.toHaveBeenCalled()
+    triggerEvent(vm.$refs.middle, 'mousedown', e => { e.button = middle })
+    expect(spyMiddle).toHaveBeenCalled()
+  })
+
   it('should support custom keyCode', () => {
     Vue.config.keyCodes.test = 1
     vm = new Vue({