vueuse 中文文档

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

Vue 通过 VueUseuseActiveElement 获取当前焦点元素,支持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>

在线例子

例子

Catalog
vueuse 入门 State 状态 Elements 元素 useActiveElement 焦点元素 useDocumentVisibility 是否可见 useDraggable 拖动元素 useDropZone 文件拖拽区 useElementBounding 获取元素边界 useElementSize 元素大小 useElementVisibility 元素是否可见 useIntersectionObserver 元素是否可见 useMouseInElement 鼠标hover事件 useMutationObserver 监视 DOM 变动 useParentElement 获取父元素 useResizeObserver 监控元素大小 useWindowFocus 窗口焦点状态 useWindowScroll 滚动条位置 useWindowSize 获取窗口大小 Browser 浏览器 Sensors 感应监测