当前位置：首页 > VUE

vue实现默认焦点

2026-02-17 10:55:04VUE

实现默认焦点的方法

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

使用ref和mounted钩子

在模板中使用ref属性标记需要获取焦点的元素，然后在mounted生命周期钩子中调用该元素的focus()方法。

vue实现默认焦点

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

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

使用自定义指令

创建一个自定义指令来自动处理焦点逻辑，使代码更可复用。

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

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

使用autofocus属性

对于简单的场景，可以直接使用HTML5的autofocus属性，但需要注意浏览器兼容性。

vue实现默认焦点

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

动态设置焦点

在需要根据条件动态设置焦点时，可以结合v-if或v-show与上述方法使用。

<template>
  <input v-if="shouldFocus" ref="inputRef" />
</template>

<script>
export default {
  data() {
    return {
      shouldFocus: false
    }
  },
  methods: {
    setFocus() {
      this.shouldFocus = true
      this.$nextTick(() => {
        this.$refs.inputRef.focus()
      })
    }
  }
}
</script>

在Vue3中的实现

Vue3的Composition API中实现默认焦点：

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

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const inputRef = ref(null)

    onMounted(() => {
      inputRef.value.focus()
    })

    return {
      inputRef
    }
  }
}
</script>

选择哪种方法取决于具体需求和项目架构。自定义指令适合需要多次复用焦点逻辑的场景，而简单的单次焦点设置使用ref和mounted钩子即可。