vue-element-ui 表单结构
Posted kongrui
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-element-ui 表单结构相关的知识,希望对你有一定的参考价值。
el-form element表单结构
:model="loginForm" 绑定表单对象
:rules="loginFormRules" 绑定表单验证规则
el-form-item prop="username" prop 表单组件验证规则
<el-input v-model="loginForm.username" prefix-icon ="iconfont icon-user"></el-input> 输入框内容
<template> <div class="login_container"> <div class="login_box"> <!-- 头像区域 --> <div class="avatar_box"> <img src="../assets/logo.png" > </div> <!-- 登录表单区域 --> <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"> <!-- 用户名 --> <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon ="iconfont icon-user"></el-input> </el-form-item> <!-- 密码 --> <el-form-item prop="password"> <el-input v-model="loginForm.password" prefix-icon ="iconfont icon-3702mima"></el-input> </el-form-item> <!-- 按钮区域 --> <el-form-item class="btns"> <el-button type="primary" @click="login">登录</el-button> <el-button type="info" @click="resetLoginForm">重置</el-button> </el-form-item> </el-form> </div> </div> </template> <script> export default { data(){ return { // 这是登录表单的数据绑定对象 loginForm: { username: ‘admin‘, password: ‘123456‘ }, loginFormRules: { // 验证用户名是否合法 username: [ {required: true, message: "请输入登录名称", trigger: ‘blur‘}, { min: 3, max: 10, message: ‘长度在 3 到 10 个字符‘, trigger: ‘blur‘ } ], // 验证密码是否合法 password: [ {required: true, message: "请输入登录密码", trigger: ‘blur‘}, { min: 3, max: 15, message: ‘长度在 3 到 15 个字符‘, trigger: ‘blur‘ } ] } } }, methods: { // 点击重置按钮,重置登录表单 , 重置到双向绑定初始数据 resetLoginForm(){ console.log(this) this.$refs.loginFormRef.resetFields(); }, login(){ this.$refs.loginFormRef.validate(async (valid) => { // 表单登录之前进行预验证, 返回值validate为true/false, 可传回调函数 console.log(valid) if ( !valid ) return; const {data: res} = await this.$http.post(‘login‘, this.loginForm) console.log(res) if (res.meta.status !== 200) return this.$message.error(‘登录失败‘) this.$message.success(‘登录成功‘) // 1.1 项目中出了登录之外的其他API接口,必须在登录之后才能访问 // 1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中 window.sessionStorage.setItem(‘token‘, res.data.token) // 2. 通过编程式导航跳转到后台主页,路由地址是 /home this.$router.push(‘/home‘) }) } } } </script> <style lang="less" scoped> .login_container{ background-color: #2b4b6b; height: 100%; } .login_box{ width: 450px; height: 300px; background: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); .avatar_box{ height: 130px; width: 130px; border: 1px solid #eeeeee; border-radius: 50%; padding: 10px; position: absolute; left: 50%; box-shadow: 0 0 10px #dddddd; transform: translate(-50%, -50%); background-color: #fff; img{ width: 100%; height: 100%; border-radius: 50%; background-color: #eeeeee; } } } .login_form{ position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; } .btns{ display: flex; justify-content: center; } </style>
注意到prop接每个字段的验证规则,v-model接每个字段的数据
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
以上是关于vue-element-ui 表单结构的主要内容,如果未能解决你的问题,请参考以下文章