vue3 form表单布局组件

<think>我们来实现一个简单的自定义表单组件，包括输入框和提交按钮，并展示如何使用这个自定义表单组件。 我们将创建一个名为`SimpleForm`的组件，它包含两个输入字段（用户名和邮箱）和一个提交按钮。 同时，我们会在父组件中使用这个表单，并处理提交事件。 步骤： 1. 创建SimpleForm组件，内部使用两个自定义输入组件（CustomInput）和一个按钮。 2. 自定义输入组件CustomInput实现双向绑定和错误显示。 3. 在SimpleForm组件中，管理表单数据，验证和提交。 注意：为了简化，我们只做简单的非空验证。 文件结构： - components/ - CustomInput.vue - SimpleForm.vue - App.vue 首先，我们实现CustomInput.vue（与之前类似，但更简单）：</think>### Vue3 简单自定义表单组件实现 下面是一个简洁的自定义表单组件实现，包含基本的输入字段和表单提交功能： ```vue <!-- SimpleForm.vue --> <script setup> import { ref } from &#39;vue&#39; // 定义表单字段 const formData = ref({ username: &#39;&#39;, email: &#39;&#39;, password: &#39;&#39; }) // 提交处理函数 const submitForm = () => { console.log(&#39;表单提交数据:&#39;, formData.value) // 这里可以添加API调用 alert(`表单提交成功!\n用户名: ${formData.value.username}\n邮箱: ${formData.value.email}`) } // 重置表单 const resetForm = () => { formData.value = { username: &#39;&#39;, email: &#39;&#39;, password: &#39;&#39; } } </script> <template> <form @submit.prevent="submitForm" class="simple-form"> <div class="form-group"> <label>用户名</label> <input v-model="formData.username" type="text" placeholder="请输入用户名" class="form-input" > </div> <div class="form-group"> <label>电子邮箱</label> <input v-model="formData.email" type="email" placeholder="请输入邮箱" class="form-input" > </div> <div class="form-group"> <label>密码</label> <input v-model="formData.password" type="password" placeholder="请输入密码" class="form-input" > </div> <div class="form-actions"> <button type="submit" class="submit-btn">提交</button> <button type="button" @click="resetForm" class="reset-btn">重置</button> </div> </form> </template> <style scoped> .simple-form { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #e1e1e1; border-radius: 8px; background-color: #f9f9f9; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: 500; color: #333; } .form-input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; box-sizing: border-box; } .form-input:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); } .form-actions { display: flex; gap: 10px; margin-top: 20px; } .submit-btn, .reset-btn { flex: 1; padding: 10px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.2s; } .submit-btn { background-color: #3498db; color: white; } .submit-btn:hover { background-color: #2980b9; } .reset-btn { background-color: #e74c3c; color: white; } .reset-btn:hover { background-color: #c0392b; } </style> ``` ### 使用示例 (App.vue) ```vue <script setup> import SimpleForm from &#39;./components/SimpleForm.vue&#39; </script> <template> <div class="app-container"> <h1>用户注册</h1> <SimpleForm /> </div> </template> <style> .app-container { max-width: 600px; margin: 40px auto; padding: 20px; font-family: Arial, sans-serif; } h1 { text-align: center; color: #2c3e50; margin-bottom: 30px; } </style> ``` ### 实现说明 1. **响应式数据管理**： - 使用 `ref` 创建响应式表单数据对象 - 通过 `v-model` 实现表单输入的双向绑定 2. **表单功能**： - `submitForm` 方法处理表单提交 - `resetForm` 方法重置表单数据 - 使用 `@submit.prevent` 阻止默认表单提交行为 3. **样式设计**： - 简洁的表单布局和样式 - 聚焦状态下的输入框高亮效果 - 按钮悬停状态变化 4. **组件结构**： - 自包含的表单组件，无需外部依赖 - 清晰的视觉层次和用户体验 ### 功能扩展建议 1. 添加表单验证功能 2. 实现表单加载状态 3. 添加"记住我"复选框 4. 集成第三方登录选项 5. 添加密码强度指示器