element组件真的很好用，造好了很多现成的轮子，可以直接组装，可是组装的过程真的出现好多低级错误，所以一点要记录下来，每次项目的错误都是下一次项目的宝贵经验！

工作划分

1. 在我的登录按钮之下引用一个空白的dialog弹框，使点击登录有弹框相应
2. 在dialog弹框里面加入form表单，并设置验证规章
   ps 难点：在设置表单验证和提交时数据流向和接下来的页面跳转逻辑

• 在登录框下加入Dialog
• 

<!--登录按钮，dialogFormVisible控制着下方的dialog是否显示出来-->
<el-button round @click="dialogFormVisible = true"><p class="ptext">登录</p></el-button>
<!---->
<!--仔细阅读Dialog的各个属性参数，会影响到布局排版，例如遇到了一个大坑就是没有设置:append-to-body='true'，导致遮罩遮盖整个页面，:lock-scroll="false"没有设置的话，点击前后会感觉到头部导航栏的移动，体验性很不好！！还有设置dialog的宽度width="40%"前面不用加冒号：-->
 <el-dialog title="登录" :visible.sync="dialogFormVisible"  center :append-to-body='true' :lock-scroll="false" width="40%">
<!--这里可以写各种登录表单-->

</el-dialog>

• 设置验证表单就像酱紫
  

<!--v-model实现了双向绑定，按登录时就可以直接触发post，直接用data里面的数据post给后台（动态修改的）-->
 <el-form-item label="账号" prop="num">
    <el-input v-model.number="ruleForm2.num"></el-input>
  </el-form-item>

  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
  </el-form-item>

  <el-form-item label="记住密码" prop="delivery">
    <el-switch v-model="ruleForm2.delivery"></el-switch>
  </el-form-item> 
</el-form>

接下来就4写表单的验证规则了

/*这里有个小知识点：直接在data（）{}存放的数据是全局变量，其他组件也可以引用，在data（）{return{}} 里面写的就是只能在本组件使用的数据*/
 data() {
    /*检查账号名方法*/
    var checkNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            /*验证是否电话*/
            if (!myreg.test(value) ) {
              callback(new Error('请输入正确的手机号码'));
            } else {
              callback();
            }

          }
        }, 1000);
      };
      /*检查密码方法*/
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
          /*这里会在input下面显示错误信息，都死element的现成轮子*/
        } else {
          callback();
        }
      };
    /*插入form方法*/

      return {
            loginPower:false,
      /*插入form方法*/
       /*设定规则指向*/
        ruleForm2: {
          pass: '',
          num: '',
           delivery: false,
        }, /*存放表单三个变量*/
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
       /*输入时，密码和账号会触发在这里绑定的两个验证方法validatePass、checkNum（写在data）*/
          num: [
            { validator: checkNum, trigger: 'blur' }
          ]
        },

 methods: {
 /*提交（登录）按钮触发的事件*/
      submitForm(formName) {
         this.$refs[formName].validate((valid) => {
          if (valid) {
          //提交成功做的动作，可以做post动作

          });
          } else {
            console.log('error submit!!');
            return false;
          }
        }); 
      },
      }

最后半成品

整个登录弹框代码：

<el-button round @click="dialogFormVisible = true">登录</el-button>

<el-dialog title="登录" :visible.sync="dialogFormVisible" center>

  <!-- 插入测试 -->
   <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">

 <el-form-item label="账号" prop="num">
    <el-input v-model.number="ruleForm2.num"></el-input>
  </el-form-item>

  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
  </el-form-item>

  <el-form-item label="记住密码" prop="delivery">
    <el-switch v-model="ruleForm2.delivery"></el-switch>
  </el-form-item> 
  <span><a>忘记密码？</a></span>

</el-form>
   <!-- 插入测试 -->

  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false; resetForm('ruleForm2')">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm2')">登 录</el-button>
  </div>
</el-dialog>

/*在script里面*/
 data() {
    /*插入form方法*/
    var checkNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(value) ) {
              callback(new Error('请输入正确的手机号码'));
            } else {
              callback();
            }

          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {

          callback();
        }
      };
    /*插入form方法*/

      return {
            loginPower:false,
      /*插入form方法*/
       /*设定规则指向*/
        ruleForm2: {
          pass: '',
          num: '',
           delivery: false,
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],

          num: [
            { validator: checkNum, trigger: 'blur' }
          ]
        },

    /*插入form方法*/

        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          type: [],
          resource: '',
          desc: ''
        },
       formLabelWidth: '120px' 
      };
    },
        methods: {
      submitForm(formName) {
         this.$refs[formName].validate((valid) => {
          if (valid) {
          //提交成功做的动作
          dialogFormVisible = false;
            /* alert('submit!') ; */
            this.$message({
            type: 'success',
            message: '提交成功' 
          });
          } else {
            console.log('error submit!!');
            return false;
          }
        }); 
      },
    resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }