vue + elementui 表单居中对齐，验证码倒计时

1、表单居中对齐：

      <fieldset>
        <legend >个人信息</legend>
        <!-- 姓名 -->
        <el-form-item label="姓名：" prop="apply_person_name" size = 'small' >
          <el-input v-model="form.apply_person_name" placeholder="请输入姓名"  class="input_width"></el-input>
        </el-form-item>
      </fieldset>
      <br>

<style scoped>
  fieldset {
    /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
    border:2px solid #DCDFE6;  text-align:left; border-radius: 8px;margin: 0 auto;width:50%;
  }
</style>

效果如下：

2、验证码倒计时：
验证码button

      <!-- 验证码 -->
      <el-form-item label="验证码" prop="smsCode">
        <el-input v-model="form.smsCode" placeholder="请输入6位验证码" maxlength="6" show-word-limit class="input_width"></el-input>
        <el-button v-bind:type="button_sms_type" v-on:click="sendSmsCode" v-bind:disabled="button_sms_disable">{{button_sms_value}}</el-button>
      </el-form-item>

vue的data里面的数据

        button_sms_type :'success',
        button_sms_value:'验证码',
        button_sms_disable:false,
        sms_time_count:60,
        sms_timer:null,

methods里面的方法

methods: {
      sms_count_down(){
        // 验证码倒计时
        if (!this.sms_timer) {
          this.count = this.sms_time_count
          //验证码发送成功，倒计时
          this.button_sms_type = 'info'
          this.button_sms_disable = true
          this.button_sms_value = "已发送(" + this.count + ")"

          //第一种缩写写法
          this.sms_timer = setInterval(() => {
            if (this.count > 0 && this.count <= this.sms_time_count) {
              this.count--

              this.button_sms_value = "已发送(" + this.count + ")"
              console.log(this.count)
            } else {
              clearInterval(this.sms_timer)
              this.sms_timer = null
              console.log('倒计时结束')
              this.button_sms_type = 'success'
              this.button_sms_disable = false
              this.button_sms_value = '验证码'

            }
          }, 1000)

          //第二种写法
          // const _this = this //一定要定义_this , 否则在fn方法里面this就代表的是fn()这个方法
          // var test = function fn(){
          //   if (_this.count > 0 && _this.count <= _this.sms_time_count) {
          //     // alert(this)
          //     _this.count--

          //     _this.button_sms_value = "已发送(" + _this.count + ")"
          //     console.log(_this.count)
          //   } else {
          //     clearInterval(_this.sms_timer)
          //     _this.sms_timer = null
          //     console.log('倒计时结束')
          //     _this.button_sms_type = 'success'
          //     _this.button_sms_disable = false
          //     _this.button_sms_value = '验证码'
          //   }
          // }
          // this.sms_timer = setInterval(test, 1000)

        }
      },
      sendSmsCode() {
        // 手机号为空，警告提示
        if(this.form.phone === ''){
          this.$message({
            message: '发送手机号不能为空',
            type: 'warning'
          });
          return
        }

        let mobile_mode=/^1[34578]\d{9}$/;
        if(!mobile_mode.test(this.form.phone)){
          this.$message({
            message: '手机号码错误',
            type: 'warning'
          });
          return
        }

        // 发送本地springboot请求,本机的地址：192.168.3.12
        const _this = this;
        this.$axios
          .get('/register/getSmsCode/' + this.form.phone)
          .then(resp => (
            console.log('请求本地接口OK'),
              console.log(resp),
              _this.springSmsStr = resp.data,

              // 验证码发送成功，提醒用户
              this.$message({
                message: '成功验证码，请在控制台查看',
                type: 'success'
              }),

              this.sms_count_down()

          ))
          .catch(function (error) { // 请求失败处理
            console.log('请求本地接口失败');
          });
      },
     }，

发送前：

倒计时：