elementUI使用实录

新项目开发用到了elementUI，但是对这个虽然会用，但是细枝末节的东西每次都需要看官方文档才能想起来怎么用，故，记之。

1、form表单 -- 表单验证

　　在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。form组件提供了表单验证的功能，只需呀通过  rules  属性传入约定的验证规则，并将 form-item 的 prop 属性设置为需要校验的字段名即可。

<template>
    <e-form  :mode="dataForm" :rules="dataRule" ref="dataForm">
        <el-form-item prop="userName">
            <el-input v-model="dataForm.userName" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
            <el-row :gutter="20">
                <el-col :span="14">
                    <el-input v-model="dataForm.captcha" placeholder="验证码"></el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                      <img  :src="captchaPath"  @click="getCaptcha()" 
 alt="">
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item>
            <el-button  class="login-btn-submit"  type="primary"  @click="dataFormSubmit()">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                dataForm: {
                    userName: '',
                    passworld: '',
                    uuid: '',
                    captcha: '',
                },
                dataRule: {
                    userName: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
                    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
                }
            }
        },
        created() {
            this.getCaptcha();
        },
        methods: {
            // 提交表单
            dataFormSubmit() {
              this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('web/login'),
              method: 'post',
              data: this.$http.adornData({
                'name': this.dataForm.userName,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'captcha': this.dataForm.captcha
              })
                }).then(({data}) => {
                      if (data && data.code === 200) {
                        this.$cookie.set('token', data.result.token)
                        this.$router.replace({ name: 'home' })
                      } else {
                        this.getCaptcha()
                        this.$message.error(data.msg)
                      }
                    })
                  }
                })
            }
        }
    }
</script>