Vue输入框获取焦点

1. 元素未渲染完成

如果你在组件挂载或数据更新后立即调用 focus()，可能元素还未渲染到 DOM 中，导致 focus() 失效。

解决方法：确保在元素渲染完成后再调用 focus()。可以使用 nextTick 确保 DOM 更新完成。

2. ref 未正确绑定

确保 ref 正确绑定到目标元素上。

3. 元素不可聚焦

不是所有 HTML 元素都支持 focus() 方法。确保目标元素是 input、textarea、button 等可聚焦元素。

如果目标元素是 div 或其他不可聚焦元素，可以为其添加 tabindex 属性：

4. 元素被隐藏或禁用

如果目标元素被 display: none 或 visibility: hidden 隐藏，或者被 disabled 禁用，focus() 会失效。

解决方法：确保元素可见且未被禁用。

5. 异步操作未完成

如果 focus() 依赖于异步操作（如数据加载），确保在异步操作完成后再调用 focus()。
例如：

 

          更换运单
const { proxy } = getCurrentInstance();
import { ref } from "vue";

// 更换运单点击
function replacingWaybill() {
// 运单号输入框获取焦点
  proxy.$refs.waybillNumberRef.focus();
}