vue中多个input焦点切换问题

业务场景是这样的：左边菜单栏有多个菜单项，点击不同的菜单项，右侧相对应的input获得焦点

需求图

开始以为问题很简单只是一个focus问题，其实问题不是那么简单，vue框架中的表单输入框不支持focus以及blur事件的解决方案，那么如何解决这个问题呢？

这里用到的Vue.directive 自定义指令，下面简单的说下自定义指令。

1、自定义指令中三个参数

el://指令所绑定的元素
binding://一个对象、包含指令的很多信息
vnode://vue编译生成的虚拟节点

2、自定义指令的生命周

1、bind://只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted://被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update://被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated://被绑定元素所在模板完成一次更新周期时调用。
5、unbind：//只调用一次，指令与元素解绑时调用。

下面就是实现代码