Vue 通过 VueUse 的 useActiveElement 获取当前焦点元素,支持Vue各版本,它是document.activeElement的响应式封装。
import { useActiveElement } from '@vueuse/core'
const activeElement = useActiveElement()
watch(activeElement, (el) => {
console.log('当前元素:', el);
//dataset是输入框的data属性的
console.log('当前元素:', el.value?.dataset?.id)
})
例子
导入UseActiveElement组件,如果没安装需要先安装
npm i @vueuse/core @vueuse/components
<UseActiveElement v-slot="{ element }">
<input placeholder="点击这个输入框试试看" type="text" data-id="100" />
<p> 当前激活组件是: {{ element.dataset.id }}</p>
</UseActiveElement>
<script setup>
import { UseActiveElement } from '@vueuse/components'
//dataset是输入框的data属性的值
</script>
例子