vue实现默认焦点

Vue 实现默认焦点的方法

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

使用 autofocus 属性

在 HTML5 中，autofocus 属性可以让元素在页面加载时自动获得焦点。在 Vue 模板中可以直接使用：

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

注意：autofocus 在某些情况下可能不会生效，尤其是在动态渲染的场景中。

使用 ref 和 focus() 方法

通过 Vue 的 ref 属性获取 DOM 元素，并在 mounted 钩子中调用 focus() 方法：

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

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

使用自定义指令

可以创建一个自定义指令来实现默认焦点功能，适用于需要复用的场景：

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

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

动态渲染时设置焦点

如果元素是动态渲染的（例如通过 v-if 或 v-for），可以在渲染完成后通过 nextTick 设置焦点：

<template>
  <input v-if="showInput" ref="inputField" />
</template>

<script>
export default {
  data() {
    return {
      showInput: false
    };
  },
  methods: {
    showAndFocus() {
      this.showInput = true;
      this.$nextTick(() => {
        this.$refs.inputField.focus();
      });
    }
  }
};
</script>

使用第三方库

如果需要更复杂的焦点管理，可以使用第三方库如 vue-focus 或 vue-directive-focus，这些库提供了更多高级功能。

以上方法可以根据具体需求选择使用，ref 和 focus() 的组合是最常用的方式，适用于大多数场景。