点开一个弹窗，vue3,里面有一个输入框，我想点开这个弹窗后鼠标能够直接聚焦到弹窗的输入框上

在 Vue 3 中，为了实现点击弹窗后焦点自动跳转到输入框，你需要在弹窗组件的模板中设置一个 `ref` 来追踪输入框元素，并在相应的生命周期钩子中设置焦点。以下是实现这一功能的基本步骤：

首先，在弹窗组件 (`modal.vue`) 的模板部分添加一个输入框，并为其添加 `ref` 属性：

<template>
  <div @show="focusOnInput" ref="modal">
    <!-- 其他内容 -->
    <input type="text" ref="inputField" @focus="onInputFocus" v-model="inputValue" />
    <!-- 其他内容 -->
  </div>
</template>

接下来，在 `methods` 部分添加两个方法：

<script>
export default {
  // ...其他配置...

  methods: {
    focusOnInput() {
      this.$refs.inputField.focus(); // 设置焦点到 inputField
    },
    
    onInputFocus() {
      // 当输入框获得焦点时，可以在此处添加事件处理，比如清除光标位置等
    },
  },
  // ...其他生命周期钩子...
}
</script>

然后，在触发弹窗显示的地方，确保在打开弹窗的同时调用 `focusOnInput()` 方法：

// App.vue 或其他地方
<button @click="showModal && showModal().focusOnInput()">点击打开弹窗</button>

// 弹窗组件内
methods: {
  showModal() {
    return this.$refs.modal.show();
  }
},

现在，当用户点击按钮时，弹窗会立即打开，并且输入框会自动获取焦点。

如果你希望在外部控制焦点切换，可以在 `modal.vue` 的 `props` 中添加一个属性，用于外部调用焦点切换方法：

<!-- 在 modal.vue -->
<template>
  <!-- ... -->
  <button @click="$emit('focusInput')">聚焦输入框</button>
  <!-- ... -->
</template>

<script>
// ...在 methods 添加 focusInput 方法
</script>

并在外部组件调用：

// App.vue 或其他地方
<modal ref="modal" @focusInput="focusOnModalInput"></modal>

methods: {
  focusOnModalInput() {
    this.$refs.modal.focusOnInput();
  }
}