Vue3--input回车事件，跳到下一个输入框（非脚手架）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 回车键示例</title><!-- 引入 Vue 3 和 Element Plus --><!-- 包含 Vue 3 库 --><script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script><!-- 包含 Element Plus 的 CSS 样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.3.9/dist/index.min.css"><!-- 包含 Element Plus 的 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.9/dist/index.full.min.js"></script></head><body><div id="app"><!-- Vue 应用容器 --><el-form :model="UserMage" label-width="120px"><!-- 用户名输入表单项 --><el-form-item label="">用户名：<!-- 用户名输入框 --><el-input v-model="username" auto-complete="off" placeholder="请输入用户名" size="large" @keyup.enter.native="focusInput" /></el-form-item><!-- 密码输入表单项 --><el-form-item label="">密码：<!-- 密码输入框 --><el-input v-model="password" auto-complete="off" placeholder="请输入密码" size="large" show-password ref="barcodepwd" /></el-form-item></el-form></div><script>// 解构 Vue 组合式 API 函数const {reactive,ref,toRefs,createApp,} = Vue;// Vue 3 组合式 API 设置函数const vue3Composition = {setup() {// 定义用户管理的响应式数据const UserMage = reactive({username: '',password: '',});// 创建一个引用，用于密码输入框元素const barcodepwd = ref(null);// 在按下回车键时聚焦到密码输入框的函数const focusInput = () => {barcodepwd.value.focus();}// 处理表单提交的函数const onSubmit = () => {console.log('提交！');};// 将响应式数据转换为引用，以在模板中使用const UserMageRefs = toRefs(UserMage);// 在模板中使用的数据和函数return {UserMage,...UserMageRefs,onSubmit,barcodepwd,focusInput,}}};// 创建 Vue 应用程序实例// const app = createApp(vue3Composition); // 使用 Element Plus 插件 // app.use(ElementPlus); // 挂载 Vue 应用程序到指定元素上 // app. 挂载('#app'); // 使用组合式 API 创建 Vue 应用程序实例createApp(vue3Composition).use(ElementPlus) // 使用 Element Plus 插件.mount("#app"); // 挂载应用到指定元素上</script></body></html>