如何给vue页面所有input、select、button、radio、checkbox元素添加tabindex，并且通过enter键或者上下左右键都可以控制元素的聚焦顺序，遍历所有的tabindex的时候，如果当前元素绑定keydown事件，且当前的tabindex和下一个的tabindex都是按钮，则是单击事件，如果当前元素是是input，则是失焦事件，下一个是input则是聚焦事件，如果当前元素绑定失焦事件，先判断是往下还是往前，如果没有下一个元素的话，，找到下一个元素，并且给下一个元素聚焦

为实现给所有的表单元素添加tabindex，我们可以使用Vue的自定义指令。具体实现步骤如下：

1. 创建一个自定义指令，用于给所有表单元素绑定tabindex。在指令的bind钩子函数中，获取元素的tagName，并判断是否为input、select、button、radio、checkbox等表单元素，如果是，则给元素设置tabindex属性。

Vue.directive('tabindex', {
  bind: function(el, binding, vnode) {
    const tagName = el.tagName.toLowerCase();
    if (['input', 'select', 'button', 'radio', 'checkbox'].includes(tagName)) {
      el.setAttribute('tabindex', binding.value);
    }
  }
})

2. 在Vue组件中，使用v-tabindex指令，为所有表单元素绑定tabindex。例如：

<template>
  <div>
    <input v-tabindex:1 type="text" />
    <select v-tabindex:2>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
    <button v-tabindex:3>Button</button>
    <input v-tabindex:4 type="radio" name="radio" value="1" />
    <input v-tabindex:5 type="radio" name="radio" value="2" />
    <input v-tabindex:6 type="checkbox" value="1" />
  </div>
</template>

3. 在Vue组件中，监听键盘事件，实现通过键盘控制元素聚焦顺序。在keydown事件中，判断按下的键是否是Enter键或上下左右键，如果是，则获取当前聚焦元素的tabindex，根据tabindex以及按下的键计算下一个聚焦元素的tabindex，并将下一个元素聚焦。如果当前元素绑定了keydown事件，并且当前元素和下一个元素都是按钮，则触发当前元素的click事件。如果当前元素是input，并且下一个元素也是input，则当前元素失焦，下一个元素聚焦。

export default {
  mounted() {
    const formElements = document.querySelectorAll('input, select, button, radio, checkbox');
    formElements.forEach((el) => {
      el.addEventListener('keydown', (e) => {
        if (e.keyCode === 13 || e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39) {
          e.preventDefault();
          const currentIndex = el.getAttribute('tabindex');
          let nextIndex = currentIndex;
          if (e.keyCode === 13) {
            if (el.tagName.toLowerCase() === 'input' && el.type === 'checkbox') {
              el.checked = !el.checked;
            } else if (el.tagName.toLowerCase() === 'input' && el.type === 'radio') {
              el.checked = true;
            } else if (el.tagName.toLowerCase() === 'button' || (el.tagName.toLowerCase() === 'input' && el.type === 'submit')) {
              el.click();
            }
          } else if (e.keyCode === 38 || e.keyCode === 37) {
            nextIndex = parseInt(currentIndex) - 1;
          } else if (e.keyCode === 40 || e.keyCode === 39) {
            nextIndex = parseInt(currentIndex) + 1;
          }
          const nextElement = document.querySelector(`[tabindex="${nextIndex}"]`);
          if (nextElement) {
            nextElement.focus();
            if (el.tagName.toLowerCase() === 'input' && nextElement.tagName.toLowerCase() === 'input') {
              el.blur();
            }
          }
        }
      })
    })
  }
}

4. 在Vue组件中，监听聚焦事件和失焦事件，实现按顺序遍历所有的tabindex。在focus事件中，获取当前聚焦元素的tabindex，根据tabindex计算下一个聚焦元素的tabindex，并将下一个元素聚焦。在blur事件中，判断失焦的方向（往前或往后），如果往前失焦，则获取上一个聚焦元素，并将其聚焦；如果往后失焦，则获取下一个聚焦元素，并将其聚焦。

export default {
  mounted() {
    const formElements = document.querySelectorAll('input, select, button, radio, checkbox');
    formElements.forEach((el) => {
      el.addEventListener('focus', (e) => {
        const currentIndex = el.getAttribute('tabindex');
        let nextIndex = currentIndex;
        if (currentIndex === null) {
          nextIndex = 1;
        } else {
          nextIndex = parseInt(currentIndex) + 1;
        }
        const nextElement = document.querySelector(`[tabindex="${nextIndex}"]`);
        if (nextElement) {
          nextElement.focus();
        }
      })

      el.addEventListener('blur', (e) => {
        const currentIndex = el.getAttribute('tabindex');
        let nextIndex = currentIndex;
        if (e.relatedTarget && e.relatedTarget.getAttribute('tabindex')) {
          const relatedIndex = parseInt(e.relatedTarget.getAttribute('tabindex'));
          if (relatedIndex < parseInt(currentIndex)) {
            nextIndex = parseInt(currentIndex) - 1;
          } else {
            nextIndex = parseInt(currentIndex) + 1;
          }
        } else {
          nextIndex = parseInt(currentIndex) - 1;
        }
        const nextElement = document.querySelector(`[tabindex="${nextIndex}"]`);
        if (nextElement) {
          nextElement.focus();
        }
      })
    })
  }
}

通过以上步骤，我们实现了为所有的表单元素添加tabindex，并实现了通过键盘控制元素聚焦顺序，以及按顺序遍历所有的tabindex。同时，我们还实现了对特定元素绑定click事件、失焦事件、聚焦事件。