vue3的事件修饰符有哪些

vue3的事件修饰符有哪些

在 Vue 3 中，事件修饰符用于简化事件处理逻辑，例如阻止默认行为、停止事件冒泡等。Vue 3 的事件修饰符与 Vue 2 基本一致，以下是常见的事件修饰符及其用法：

1. 常用事件修饰符

修饰符	说明
.stop	调用 event.stopPropagation()，阻止事件冒泡。
.prevent	调用 event.preventDefault()，阻止默认行为。
.capture	使用捕获模式监听事件（即从外层元素向内层元素触发）。
.self	只有当事件是从触发事件的元素本身触发时才会调用事件处理函数。
.once	事件只会触发一次，之后自动解绑。
.passive	表示事件处理函数不会调用 event.preventDefault()，通常用于优化滚动性能。

2. 按键修饰符

用于监听键盘事件时，指定特定的按键。

修饰符	说明
.enter	监听回车键（Enter）。
.tab	监听 Tab 键。
.delete	监听删除键（Delete 或 Backspace）。
.esc	监听 Esc 键。
.space	监听空格键（Space）。
.up	监听上箭头键。
.down	监听下箭头键。
.left	监听左箭头键。
.right	监听右箭头键。

3. 系统修饰键

用于监听组合键（如 Ctrl + Click）。

修饰符	说明
.ctrl	监听 Ctrl 键。
.alt	监听 Alt 键。
.shift	监听 Shift 键。
.meta	监听 Meta 键（在 Mac 上是 Command 键，在 Windows 上是 Windows 键）。

4. 鼠标按钮修饰符

用于监听特定的鼠标按钮。

修饰符	说明
.left	监听鼠标左键。
.right	监听鼠标右键。
.middle	监听鼠标中键。

5. 修饰符的用法示例

示例 1：阻止事件冒泡和默认行为

<template>
  <div @click="handleParentClick">
    <button @click.stop.prevent="handleClick">点击我</button>
  </div>
</template>

<script setup>
function handleClick() {
  console.log('按钮被点击了');
}

function handleParentClick() {
  console.log('父元素被点击了');
}
</script>

• .stop：阻止事件冒泡，父元素的 handleParentClick 不会触发。

• .prevent：阻止默认行为（如表单提交）。

示例 2：按键修饰符

<template>
  <input @keyup.enter="handleEnter" placeholder="按下回车键" />
</template>

<script setup>
function handleEnter() {
  console.log('回车键被按下');
}
</script>

• .enter：监听回车键。

示例 3：系统修饰键

<template>
  <button @click.ctrl="handleCtrlClick">按住 Ctrl 点击我</button>
</template>

<script setup>
function handleCtrlClick() {
  console.log('Ctrl + 点击');
}
</script>

• .ctrl：监听 Ctrl 键。

示例 4：.once 修饰符

<template>
  <button @click.once="handleClick">只能点击一次</button>
</template>

<script setup>
function handleClick() {
  console.log('按钮被点击了');
}
</script>

• .once：事件只会触发一次。

示例 5：.passive 修饰符

<template>
  <div @scroll.passive="handleScroll">滚动我</div>
</template>

<script setup>
function handleScroll() {
  console.log('正在滚动');
}
</script>

• .passive：用于优化滚动性能，表示事件处理函数不会调用 event.preventDefault()。

6. 自定义按键修饰符

Vue 3 允许通过 config.globalProperties 自定义按键修饰符。

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 自定义按键修饰符
app.config.keyCodes = {
  f1: 112, // 将 F1 键的键码映射为 `f1`
};

app.mount('#app');

<template>
  <input @keyup.f1="handleF1" placeholder="按下 F1 键" />
</template>

<script setup>
function handleF1() {
  console.log('F1 键被按下');
}
</script>

总结

Vue 3 的事件修饰符非常强大，可以简化事件处理逻辑，提升开发效率。常用的修饰符包括：

• 事件修饰符（如 .stop、.prevent）。

• 按键修饰符（如 .enter、.tab）。

• 系统修饰键（如 .ctrl、.shift）。

• 鼠标按钮修饰符（如 .left、.right）。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github