鼠标按键修饰符

鼠标按键修饰符修饰的是鼠标的左、滚轮、右键。

如果我们需要点击某个事件，但是我们可以需要使用鼠标右键

 1  <div id="app">
 2         <p>{{a}}</p>
 3         <button  @click.right='add'>按我加1 </button>
 4     </div>
 5     <script src="./js/vue.js"></script>
 6     <script>
 7         var vue= new Vue({
 8             el:"#app",
 9             data:{
10                 a:100
11             },
12             methods: {
13                 add(){
14                     this.a++
15                     console.log(this.a)
16                 }
17             }
18         })
19     </script>

此时鼠标右键实现加一操作。

1  <button  @click.left='add'>按我加1 </button>   //鼠标左键实现加一操作
1  <button  @click.middle='add'>按我加1 </button>   //鼠标中键实现加一操作

此时我们发现右键点击按钮的时候确实可以实现点击，但是也会出现右键的默认弹窗。此时我们用prevent属性阻止默认事件。

1 <button  @click.right.prevent='add'>按我加1 </button>

 

posted @ 2021-09-13 21:47  keyeking  阅读(128)  评论(0)  编辑  收藏  举报