《天坑之路》--- Vue自定义指令自动聚集失败

62 阅读1分钟

背景

Vue3使用自定义指令自动聚集时,无法自动化聚集。

代码如下

代码说明

如图在mounted钩子中,声明了一个可聚焦的元素标签名,用来判断当前元素是否是可聚焦的。

isFocus用来标记是否已经有聚焦的元素。

nodeFocus函数中先判断是否有元素聚焦和元素是否存在。

再判断是否有指定第几个元素聚焦,而且是限定input标签;在父元素中查询出所有的input标签,并检查是否存在指定索引的input元素,有则直接聚焦。

如果当前元素不是可聚焦列表中的元素,则查询遍历他的子元素是否是可聚焦的。依次递归查询。

使用上面的代码时,生成输入框时并不会自动聚集。

解决方法

自己觉得是mounted后元素还没生成完?于是在钩子中加了console.log(el)打印出el元素,但是能打印出来的,没有不存在的问题。

后面尝试了下面的方案

  • 使用nextTick ---- 没有效果
  • 使用setTimeout ---- 可聚焦,解决问题

具体原因不知道是为什么???