### Element UI 美观 Form 表单 示例 为了创建美观的 `Element UI` 表单，除了遵循基本结构外，还可以通过CSS自定义样式来增强视觉效果。下面是一个经过美化处理的登录表单位置案例： #### HTML 结构 ```html <template> <div class="login-container"> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名：" prop="username"> <el-input v-model.number="ruleForm.username"></el-input> </el-form-item> <el-form-item label="密码：" prop="password"> <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </div> </template> ``` #### JavaScript 部分 ```javascript <script> export default { data() { var checkUsername = (rule, value, callback) => { if (!value) { return callback(new Error('请输入用户名')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(); } else { callback(); } }, 1000); }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; return { ruleForm: { username: '', password: '' }, rules: { username: [ { validator: checkUsername, trigger: 'blur' } ], password: [ { validator: validatePass, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; </script> ``` #### CSS 样式部分 ```css <style scoped> .login-container{ width: 420px; margin: auto; padding-top: 8%; } .demo-ruleForm .el-input__inner:focus { border-color: #79bbff; } /* 自定义按钮样式 */ .el-button--primary { background-color: #409EFF; border-color: #409EFF; } .el-button--default:hover { color: #409eff; background: #ecf5ff; border-color: #b3d8ff; } /* 修改默认错误提示框颜色 */ .el-form-item__error { color: red !important; } </style> ``` 此示例展示了如何利用 `Element UI` 创建一个简单而优雅的登录界面[^1]。