探索 v-on 之奥秘二：事件及各类修饰符的深度剖析与案例展示

目录

鼠标按键修饰符

按键修饰符

系统修饰符

---

相关阅读：

探索 v-on 之奥秘一：事件及各类修饰符的深度剖析与案例展示

​​​​​​​鼠标按键修饰符

---

        鼠标按键修饰符主要用于监听特定鼠标按键与元素交互时的事件。

        .left：表示鼠标左键修饰符。通常用于监听鼠标左键点击事件。

        .right：表示鼠标右键修饰符。用于监听鼠标右键点击事件。

        .middle：表示鼠标中键（如果有）修饰符。用于特定情况下对鼠标中键操作的监听。

        通过使用这些修饰符，可以更精确地处理不同鼠标按键触发的行为，实现更细致的交互效果。

        示例代码如下：

<!-- view部分 -->  
<div id="app">  
    <el-divider content-position="left">left、right、middle鼠标按键修饰符</el-divider>  
    <el-row>  
        <el-col :span="24">  
            <button @click.left="btn" class="btn">按钮一</button>  
            <button @click.middle="btn" class="btn">按钮二</button>  
            <button @click.right="btn" class="btn">按钮三</button>  
        </el-col>          
    </el-row>  
</div>  
<!-- js部分 -->  
<script>  
    const {createApp}=Vue;  
    const app=createApp({  
        methods:{  
            btn(){  
                console.log('button');  
            }  
        }  
    })  
    app.use(ElementPlus);  
    app.mount('#app');  
</script>

        运行结果，截图所示：

        分析：

        鼠标左键单击按钮一控制台输出：“button”，

        鼠标中键单击按钮一控制台输出：“button”，

        鼠标右键单击按钮一控制台输出：“button”，

​​​​​​​按键修饰符

---