按鍵事件

在 Vue 中，有幾種方法可以監聽 Enter 按鍵事件。以下是常見的實現方式：

1. 使用 @keyup.enter 修飾符

<template><input type="text" v-model="inputValue"@keyup.enter="handleEnter"placeholder="按Enter鍵觸發">
</template><script>
export default {data() {return {inputValue: ''}},methods: {handleEnter() {console.log('Enter鍵被按下', this.inputValue)// 在這里處理Enter鍵按下的邏輯}}
}
</script>

2. 使用 v-on 監聽鍵盤事件

<template><input type="text" v-model="inputValue"@keyup="checkEnter"placeholder="按Enter鍵觸發">
</template><script>
export default {data() {return {inputValue: ''}},methods: {checkEnter(event) {if (event.key === 'Enter') {console.log('Enter鍵被按下', this.inputValue)// 在這里處理Enter鍵按下的邏輯}}}
}
</script>

3. 在組件上監聽原生事件

如果是在自定義組件上監聽，需要使用 .native 修飾符（Vue 2）或 v-on 的寫法（Vue 3）：

Vue 2

<my-component @keyup.enter.native="handleEnter" />

Vue 3

<my-component @keyup.enter="handleEnter" />

4. 全局監聽鍵盤事件

<template><div><!-- 內容 --></div>
</template><script>
export default {mounted() {window.addEventListener('keyup', this.handleGlobalKeyUp)},beforeDestroy() {window.removeEventListener('keyup', this.handleGlobalKeyUp)},methods: {handleGlobalKeyUp(event) {if (event.key === 'Enter') {console.log('全局Enter鍵被按下')// 在這里處理全局Enter鍵按下的邏輯}}}
}
</script>

注意事項

1. 按鍵修飾符是基于 key 事件暴露的，所以確保使用 keyup 或 keydown 事件
2. Vue 提供了以下按鍵別名：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
3. 也可以使用按鍵碼（雖然不推薦，因為已廢棄）：@keyup.13（13是Enter的鍵碼）

---

鼠標事件

1. 基本鼠標事件監聽

常用鼠標事件

<template><div @click="handleClick"          <!-- 單擊 -->@dblclick="handleDoubleClick"  <!-- 雙擊 -->@mousedown="handleMouseDown"   <!-- 鼠標按下 -->@mouseup="handleMouseUp"      <!-- 鼠標釋放 -->@mousemove="handleMouseMove"  <!-- 鼠標移動 -->@mouseover="handleMouseOver"  <!-- 鼠標移入 -->@mouseout="handleMouseOut"    <!-- 鼠標移出 -->@mouseenter="handleMouseEnter" <!-- 鼠標進入（不冒泡） -->@mouseleave="handleMouseLeave" <!-- 鼠標離開（不冒泡） -->@contextmenu="handleContextMenu" <!-- 右鍵菜單 -->>鼠標事件區域</div>
</template><script>
export default {methods: {handleClick(event) {console.log('單擊事件', event)},handleDoubleClick(event) {console.log('雙擊事件', event)},// 其他事件處理函數...}
}
</script>

2. 事件修飾符

Vue 提供了一些有用的修飾符來處理鼠標事件：

<template><div><!-- 阻止默認行為 --><a href="#" @click.prevent="handleClick">阻止默認跳轉</a><!-- 阻止事件冒泡 --><div @click="outerClick"><div @click.stop="innerClick">點擊我不會冒泡到外層</div></div><!-- 事件只觸發一次 --><button @click.once="handleOnceClick">只會觸發一次</button><!-- 左/中/右鍵點擊 --><div @click.left="leftClick">左鍵點擊</div><div @click.middle="middleClick">中鍵點擊</div><div @click.right="rightClick">右鍵點擊</div><!-- 串聯修飾符 --><button @click.stop.prevent="handleClick">阻止冒泡和默認行為</button></div>
</template>

3. 鼠標按鍵檢測

可以通過事件對象檢測具體按下了哪個鼠標按鍵：

methods: {handleMouseDown(event) {// 0: 左鍵, 1: 中鍵, 2: 右鍵console.log('按下的按鍵:', event.button)// 檢測組合鍵if (event.ctrlKey) console.log('按下了Ctrl鍵')if (event.shiftKey) console.log('按下了Shift鍵')if (event.altKey) console.log('按下了Alt鍵')if (event.metaKey) console.log('按下了Meta鍵(Command鍵)')}
}

4. 鼠標位置信息

可以從事件對象獲取鼠標位置信息：

methods: {handleMouseMove(event) {// 相對于瀏覽器窗口的坐標console.log('clientX:', event.clientX, 'clientY:', event.clientY)// 相對于文檔的坐標console.log('pageX:', event.pageX, 'pageY:', event.pageY)// 相對于事件元素的坐標console.log('offsetX:', event.offsetX, 'offsetY:', event.offsetY)// 相對于屏幕的坐標console.log('screenX:', event.screenX, 'screenY:', event.screenY)}
}

5. 自定義指令監聽鼠標事件

可以創建自定義指令來監聽鼠標事件：

// 全局注冊
Vue.directive('mouse-tooltip', {bind(el, binding) {el.addEventListener('mouseenter', () => {// 顯示工具提示邏輯console.log('鼠標進入', binding.value)})el.addEventListener('mouseleave', () => {// 隱藏工具提示邏輯console.log('鼠標離開')})}
})// 使用
<div v-mouse-tooltip="'提示內容'">懸停我顯示提示</div>

6. 組合鼠標事件

可以組合多個鼠標事件實現復雜交互：

<template><div @mousedown="startDrag"@mousemove="handleDrag"@mouseup="endDrag"@mouseleave="endDrag">可拖拽區域</div>
</template><script>
export default {data() {return {isDragging: false,startX: 0,startY: 0}},methods: {startDrag(event) {this.isDragging = truethis.startX = event.clientXthis.startY = event.clientY},handleDrag(event) {if (!this.isDragging) returnconst dx = event.clientX - this.startXconst dy = event.clientY - this.startYconsole.log(`拖拽距離: x=${dx}, y=${dy}`)},endDrag() {this.isDragging = false}}
}
</script>

7. 性能優化建議

1. 對于頻繁觸發的事件（如 mousemove），使用防抖或節流：

   import { debounce } from 'lodash'methods: {handleMouseMove: debounce(function(event) {// 防抖處理后的函數}, 100)
   }
   

2. 不需要時及時移除事件監聽器，特別是在組件銷毀時

3. 對于大量元素的事件監聽，考慮使用事件委托

這些方法覆蓋了 Vue 中處理鼠標事件的主要場景，根據具體需求選擇合適的方式即可。