Vue 通过 VueUse 的 useActiveElement 获取当前焦点元素

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>

在线例子

例子