useEventListener

更加方便优雅的使用 addEventListener

TIP

useEventListener 应在 setup 内使用,这样才会在组件卸载时自动销毁监听。否则不会自动销毁。

基础使用

useEventListener(target, event, listener, options)

useEventListener(event, listener, options) 不传 target 为 window

vue
<template>
  <ap-button>点击了 {{ count }} 次</ap-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useEventListener } from 'apathia-ui'

const count = ref(0)
useEventListener('click', () => {
  count.value += 1
})
</script>

监听键盘事件

vue
<template>
  你按下的键为：
  <div style="color: red">{{ name }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useEventListener } from 'apathia-ui'
const name = ref('')
useEventListener('keydown', e => {
  name.value = e.code
})
</script>

target

参数

useEventListener(target, event, listener, options) 将返回一个函数 stop, 用于销毁监听

参数	说明	类型	默认值
target	绑定监听事件的 dom 元素（可选，默认为 window）	HtmlElement	window
event	监听事件的类型。例如 click, input	Event	-
listener	回调函数	(this: Window, ev: WindowEventMap[Event]) => void	-
options	addEventlistener 的 options(可选)	AddEventListenerOptions	-

useEventListener ​

基础使用 ​

监听键盘事件 ​

参数 ​

useEventListener

基础使用

监听键盘事件

参数