如何跟踪 Vue.js 中当前焦点输入的变化？

Question

使用document.activeElement，我可以获得对当前焦点元素的引用，但这当然不是反应性的，所以我不能在计算属性中使用它。

解决此问题的最佳方法是什么？我希望我的 Vue 应用程序中的任何组件都能够监听页面上当前焦点输入的 value、selectionStart 和 selectionEnd 属性的变化。

我怎样才能实现这样的目标？或者是否有另一种（更好的）方法来跟踪 Vue 中当前焦点输入的属性？

Answer 1

您可以在created 和focusin 事件中添加 eventListener

created() {
  document.addEventListener('focusin', this.doSomething)
},

并在方法中使用参数e 在doSomething 中接收这个重点元素

methods: {
  doSomething (e) {
    console.log(e.target)
  }