当前位置：首页 > VUE

vue 实现 input focus

2026-03-28 09:05:03VUE

实现 Input Focus 的方法

在 Vue 中实现 input 元素的 focus 可以通过多种方式完成，以下是几种常见的方法：

使用 ref 和 $refs

通过 Vue 的 ref 和 $refs 可以轻松获取 DOM 元素并调用其 focus 方法。

<template>
  <input ref="inputRef" type="text" />
  <button @click="focusInput">Focus Input</button>
</template>

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

使用 v-focus 自定义指令

自定义指令 v-focus 可以在元素挂载时自动聚焦。

<template>
  <input v-focus type="text" />
</template>

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

使用 mounted 钩子

在组件的 mounted 生命周期钩子中调用 focus 方法。

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

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

动态绑定 focus 状态

结合 v-model 和 ref，可以在特定条件下触发 focus。

<template>
  <input ref="inputRef" v-model="inputValue" type="text" />
  <button @click="triggerFocus">Trigger Focus</button>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    triggerFocus() {
      this.$refs.inputRef.focus();
    }
  }
}
</script>

使用第三方库

如果需要更复杂的 focus 管理，可以结合 vue-focus 等第三方库实现。

vue 实现 input focus

<template>
  <input v-focus="isFocused" type="text" />
</template>

<script>
import { focus } from 'vue-focus';

export default {
  directives: { focus },
  data() {
    return {
      isFocused: false
    };
  },
  methods: {
    toggleFocus() {
      this.isFocused = !this.isFocused;
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，灵活应对不同场景下的 input focus 需求。