如何在vue中的contenteditable div的嵌套节点上捕获焦点事件？

// 在Vue组件中注册自定义指令
directives: {
  focus: {
    inserted: function (el) {
      el.addEventListener('focus', function () {
        // 处理焦点事件的逻辑
      });
    }
  }
}

// 全局注册自定义指令
Vue.directive('focus', {
  inserted: function (el) {
    el.addEventListener('focus', function () {
      // 处理焦点事件的逻辑
    });
  }
});

<template>
  <div contenteditable v-focus></div>
</template>

directives: {
  focus: {
    inserted: function (el) {
      el.addEventListener('focus', function () {
        // 处理焦点事件的逻辑
        traverseNodes(el);
      });
    }
  }
}

function traverseNodes(node) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    // 处理当前节点
    // ...

    // 递归处理子节点
    for (let i = 0; i < node.childNodes.length; i++) {
      traverseNodes(node.childNodes[i]);
    }
  }
}