当前位置：首页 > VUE

vue 实现获取焦点

2026-03-07 23:44:27VUE

Vue 实现获取焦点的方法

在 Vue 中实现获取焦点可以通过多种方式，以下是几种常见的实现方法：

使用 ref 和 $refs

通过 ref 属性标记元素，然后在方法中调用 focus() 方法：

<template>
  <input ref="inputRef" />
  <button @click="focusInput">获取焦点</button>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputRef.focus()
    }
  }
}
</script>

使用 v-focus 自定义指令

创建一个自定义指令来自动聚焦元素：

<template>
  <input v-focus />
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

使用 autofocus 属性

对于简单的场景，可以直接使用 HTML5 的 autofocus 属性：

<template>
  <input autofocus />
</template>

在 mounted 钩子中获取焦点

当组件挂载完成后自动获取焦点：

<template>
  <input ref="inputRef" />
</template>

<script>
export default {
  mounted() {
    this.$refs.inputRef.focus()
  }
}
</script>

使用 nextTick 确保 DOM 更新

在某些需要等待 DOM 更新的情况下使用：

vue 实现获取焦点

<template>
  <input ref="inputRef" v-if="showInput" />
  <button @click="showInput = true">显示并聚焦输入框</button>
</template>

<script>
export default {
  data() {
    return {
      showInput: false
    }
  },
  watch: {
    showInput(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.$refs.inputRef.focus()
        })
      }
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，ref 方式最为灵活，自定义指令适合需要复用的场景，autofocus 属性最简单但有限制。