在打开一个弹窗的时候，如何让鼠标自动聚焦到弹窗里的输入框上，vue3代码实现

在Vue3中，你可以通过JavaScript或者利用 Vue 的事件系统来实现这个功能。假设你有一个弹窗组件（Modal），弹窗里有一个输入框（input field），可以这样做：

<template>
  <div class="modal">
    <input type="text" ref="focusInput" :focus="isActive" />
    <button @click="showModal">打开</button>
  </div>
</template>

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

// 创建一个表示弹窗是否显示的ref变量
const isActive = ref(false);

function showModal() {
  // 当弹窗打开时，设置输入框的聚焦状态
  isActive.value = true;
}
</script>

<style scoped>
.modal {
  display: none; /* 默认隐藏 */
  /* 添加其他样式 */
}

.modal.is-active {
  display: block; /* 弹出时显示 */
}
</style>

在这个例子中，当点击“打开”按钮时，`isActive`会被设为`true`，触发了`.is-active` CSS 类的添加，使得弹窗显示出来，并通过`ref`绑定了的`focusInput`元素自动获取焦点。

如果你想在非用户交互的情况下自动聚焦，你可能需要检查当前环境并手动调用DOM元素的`focus()`方法，但这通常不是最佳实践，因为它可能会打断用户的正常流程。上面的方法更适合常规的交互场景。