vue表单元素 元素聚焦

在Vue.js中，当表单元素获得焦点时，通常意味着用户正在交互并希望输入信息。你可以通过以下几种方式让表单元素（如input、textarea、select等）在页面加载后自动聚焦，或者在某个事件触发后聚焦：

1. 使用v-model指令：当你创建一个支持聚焦的表单控件，并将其值绑定到组件的data属性上，可以设置`focus()`方法来立即聚焦。例如：

<input type="text" v-model="username" @focus="handleFocus" />

然后在methods中定义`handleFocus`函数：

methods: {
  handleFocus() {
    this.$refs.username.focus();
  }
}

这里，`$refs.username`是指向该输入框的引用。

2. 在模板内直接设置:focus伪类：HTML5允许给元素添加`:focus`伪类，它会在元素获取焦点时应用样式。例如：

<input type="text" :focus="isFocused" ref="username" />

然后在计算属性`isFocused`中控制其状态：

computed: {
  isFocused() {
    return this.isActive && !this.isTouched;
  }
},

结合条件渲染设置focus属性：

<input :focus="isFocused" ref="username" />

3. 当表单提交事件触发时，可以在事件处理函数内部聚焦元素：

<template>
  <button @click="submitForm">Submit</button>
  <!-- ... -->
</template>

<script>
export default {
  methods: {
    submitForm() {
      // 提交表单逻辑...
      this.$refs.username.focus();
    }
  }
};
</script>