鼠标自动聚焦到某个input上vue3代码实现

在Vue 3中，如果你想在页面加载后让某个输入框自动获得焦点，你可以利用JavaScript的DOM操作或者直接在组件的`mounted()`生命周期钩子函数中设置。以下是一个简单的例子：

首先，假设你有一个名为`InputForm`的组件，其中包含一个`@focus`事件处理器，当元素聚焦时会被触发：

<template>
  <div>
    <input ref="inputField" type="text" v-model="value" @focus="handleFocus" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputField = ref(null);
    
    function handleFocus() {
      inputField.value.focus();
    }

    return {
      inputField,
      handleFocus
    };
  }
};
</script>

在上面的代码中，我们使用了`ref`来获取`input`元素，并将其赋值给`inputField`。然后在`handleFocus`方法中，当`input`元素聚焦时，我们调用`focus()`方法让它获取焦点。

在`mounted`生命周期钩子中，你可以这样实现自动聚焦：

export default {
  mounted() {
    this.handleFocus();
  },
  // ...其他配置...
};

这样，在组件挂载完成后，输入框就会立即获得焦点。