Vue 判断元素是否聚焦：使用 ref 和 document.activeElement

"Vue 判断元素是否聚焦：使用 ref 和 document.activeElement"\n\n本文介绍如何在 Vue 中使用 ref 属性和 document.activeElement 属性判断某个元素是否处于聚焦状态，并提供示例代码。\n\n在 Vue 中，可以使用 ref 属性来获取元素的引用，然后使用 $refs 来访问该元素。然后可以使用 this.$refs.elementName 来获取该元素的引用。\n\n判断某个元素是否为聚焦状态，可以通过判断该元素的 document.activeElement 属性是否等于该元素。\n\n以下是一个使用 Vue 的示例代码：\n\nhtml\n<template>\n <div>\n <input ref="myInput" type="text" @focus="checkFocus" @blur="checkFocus">\n </div>\n</template>\n\n<script>\nexport default {\n methods: {\n checkFocus() {\n if (document.activeElement === this.$refs.myInput) {\n console.log('myInput is focused');\n } else {\n console.log('myInput is not focused');\n }\n }\n }\n}\n</script>\n\n\n在上面的示例中，当输入框被聚焦时，会调用 checkFocus 方法来判断输入框是否为聚焦状态。使用 document.activeElement 来获取当前聚焦的元素，然后与 this.$refs.myInput 进行比较，如果相等则表示输入框为聚焦状态，否则表示输入框不是聚焦状态。根据判断结果可以进行相应的操作。