Element Ui

 01

目录

01--配置Element Ui

02--引入小图标  

018-登录组件表单的数据绑定

20 登录组件实线表单的重置

21 登录组件登录前的预验证

22 登录组件根据预验证是否发起请求

---

思路： 双向数据绑定怎么实现？

                登录验证

目标：

01--配置Element Ui   vue create expro   安装 npm i element-ui -S   main.js   // 引入elementUI的样式 [css, js]     import ElementUI from "element-ui"   // 引入css样式     import "element-ui/lib/theme-chalk/index.css"     Vue.use() 02--引入小图标     问题：Element-ui图标如何使用 iconfont图标 在线下载如何使用   （1）直接适应Elemnt-ui   <i class="el-icon-user"></i>   下载fonts iconfont 引入 :   （2）assets 下拉入 fonts文件（file）     //导入字体图标 main.js   import './assets/fonts/iconfont.css'   使用:   <el-form-item v-model="loginForm.password" label="密码" >       <el-input prefix-icon="iconfont icon-taocan-suoxiao"></el-input>   </el-form-item>   （3）//在线引入icon   <style lang="scss" scoped>     @import url("//at.alicdn.com/t/c/font_3765955_a2cas6wnzha.css")   </style>   <el-form-item v-model="loginForm.password" label="密码" >       <el-input prefix-icon="iconfont icon-taocan-suoxiao"></el-input>   </el-form-item>   组件布局   el-form   el-form-item   el-input   el-button   后面的图标 suffix-icon="el-icon-date"   前面的图标 prefix-icon="el-icon-search" 018-登录组件表单的数据绑定   （1）el-form 绑定属性model 值是数据对象loginForm       :model="loginForm"   （2）在data做一下定义       // 数据绑定对象         loginForm:{           username:"",           password:""         },   （3）el-input每一项 双向数据绑定       v-model="loginForm.username"       v-model="loginForm.password" // 表单的验证规则对象 （1） el-form通过属性绑定 绑定一个验证规则对象Objcet :rules="rules" （2）data 定义验证规则的属性     rules:{       // 验证用户名是否合法       username: [             { required: true, message: '请输入登录名称', trigger: 'blur' },             { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }           ],       // 验证密码是否合法       password: [             { required: true, message: '请输入登录密码', trigger: 'blur' },             { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }           ],     }     } （3）第三步在中el-from-item 通过prop 指定不同的验证规则     <el-from-item prop="username">   <el-input></el-input> </el-from-item> Form Methods ref="formRef" 获取文档流  Dom 20 登录组件实线表单的重置 （1）eel-form  ref的值就是组件的实例对象     ref="loginFormRef" （2）重置按钮添加点击事件 （3）实例对象下 resetFields()方法     对整个表单进行重置，将所有字段值重置为初始值并移除校验结果   methods:{     // 点击重置按钮，重置登录表单     resetLoginForm(){       this.$refs.loginFormRef.resetFields()     }   }   21 登录组件登录前的预验证   方法名：validate   说明：   对整个表单进行校验的方法，参数为一个回调函数。   该回调函数会在校验结束后被调用，   并传入两个参数：是否校验成功和未通过校验的字段。   若不传入回调函数，则会返回一个 promise   参数：Function(callback: Function(boolean, object))   （1）登录按钮添加点击事件@click="login"   login(){       this.$refs.loginFormRef.validate(valid =>{         console.log(valid);       })     }     22 登录组件根据预验证是否发起请求         login(){       this.$refs.loginFormRef.validate(valid =>{         // console.log(valid); //false true           if(!valid) return;         const {data:res} = await this.$http.post("login", this.loginForm)               })     }

02--axios 后端数据

 03--按钮 样式

 

 

<template>
<div class="Login">
<el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="100px" class="demo-ruleForm">
<!-- 用户名 -->
  <el-form-item label="账号" prop="username">
    <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"> </el-input>
  </el-form-item>
<!-- 密码 -->
  <el-form-item label="密码" prop="password">  
    <!-- 前缀 prefix-icon 后缀suffix-icon 附加-->
    <el-input v-model="loginForm.password" prefix-icon="iconfont icon-taocan-suoxiao" type="password"></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>
</template>
<script>
export default {
  data(){
    return{
    // 数据绑定对象
    loginForm:{
      username:"",
      password:""
    }, 
    // 表单的验证规则对象
    rules:{
      // 验证用户名是否合法
      username: [
            { required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
      // 验证密码是否合法
      password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],

    }
    }
  },
  methods:{
    // 点击重置按钮，重置登录表单
    resetLoginForm(){
      this.$refs.loginFormRef.resetFields()
    },
    login(){
      this.$refs.loginFormRef.validate(valid =>{
        // console.log(valid); //false true  
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import url("//at.alicdn.com/t/c/font_3765955_a2cas6wnzha.css")
</style>