element-ui二次封装实现短信验证码登录组件

前言

在开发 vue 项目时，我们都可能用到 element-ui，但是有时 element-ui 提供的组件太简单或不满足应用的需求，因此我们需要在其基础上再对组件进行封装。

一、实现方法

需先在项目中安装 element-ui：Vue项目使用element-ui

1.创建 PhoneLogin 组件

在 components 文件夹创建 phoneLogin 文件夹，然后在 accountLogin 文件夹中再创建PhoneLogin.vue 。

PhoneLogin.vue 代码如下：

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="phone">
            <el-input placeholder="请输入手机号" v-model="ruleForm.phone">
                <i slot="prefix" class="el-icon-phone"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop="code">
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-input placeholder="请输入验证码" v-model="ruleForm.code">
                        <i slot="prefix" class="el-icon-tickets"></i>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button @click="sendCode" :disabled="disabled">{{btnText}}</el-button>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item>
            <el-button 
            type="primary" 
            style="width:100%"
            @click="phoneLogin">登录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>


export default {
  name: 'PhoneLogin',
  components: {},
  props:{
      ruleForm: {
          type: Object,
          require: true
      },
      countDown: {
          type: Number,
          default: 60
      }
  },
  data(){
      let checkPhone = (rule, value, callback) =>{
          if(!value){
              return callback(new Error('手机号不能为空'))
          }else{
              let reg = /^1[3|4|5|7|8][0-9]\d{8}$/
              if(reg.test(value)){
                  callback()
              }else{
                  return callback(new Error('请输入正确的手机号'))
              }
          }
      }
      return{
          rules: {
              phone: [
                  {validator: checkPhone, trigger: 'change'}
              ],
              code: [
                  {required: true, message: '验证码不能为空', trigger: 'blur'}
              ]
          },
          disabled: false,
          btnText: '发送验证码'
      }
  },
  methods:{
      phoneLogin(){
         this.$refs.ruleForm.validate((valid) => {
              if(valid){
                  this.$emit('submit')
              }else{
                  this.$emit('errHandle')
              }
          })
      },
      sendCode(){
          this.$refs.ruleForm.validateField('phone', errorMessage =>{
              if(errorMessage){
                  this.$message.error(errorMessage)
              }else{
                  // 1.时间开始倒数
                  // 2.按钮进入禁用状态
                  // 3.如果倒计时结束 按钮恢复可用状态 按钮文字变为重新发送, 时间重置
                  // 4.倒计时的过程中 按钮文字为 多少s后重新发送
                  let timer = setInterval(()=>{
                      this.time --;
                      this.btnText = `${this.time}s后重新发送`
                      this.disabled = true
                      if(this.time === 0){
                          this.disabled = false;
                          this.btnText = '重新发送';
                          this.time = this.countDown
                          clearInterval(timer)
                      }
                  }, 1000)
                  this.$emit('send')
              }
          })
      }
  },
  mounted(){
      this.time = this.countDown
  }
}
</script>

2.全局注册组件

在项目根目录下创建 globalComponents 文件夹，在其下新建 index.js， 用于注册全局组件

index.js 代码如下：

//注册全局组件
import Vue from "vue"
import PhoneLogin from "../components/phoneLogin/PhoneLogin" //引入

Vue.component('phoneLogin', PhoneLogin) //注册

3.使用组件

1.在 views 文件夹下一个视图：Login.vue ， 使用组件
Login.vue 代码如下：

<template>
  <div class="login">
      <h1>短信验证码登录组件</h1>
	    <div class="account">
	        <phone-login 
	        :rule-form="phoneForm"
	        @send="send"
	        @submit="submit"
	        @errHandle="errHandle">
	        </phone-login>
	    </div>
  </div>
</template>

<script>
import PhoneLogin from '../components/phoneLogin/PhoneLogin.vue'

export default {
  name: 'Login',
  components: { PhoneLogin},
  props:{},
  data(){
      return{
          phoneForm: {
              phone: '',
              code: ''
          }
      }
  },
  methods:{
      submit(){
          this.$message.success('提交成功')
          console.log("成功")
      },
      errHandle(){
          this.$message.error('表单填写有误，请检查')
          console.log("失败")
      },
      send(){
          this.$message.info('发送验证码成功')
      }
  },
  mounted(){

  }
}
</script>

<style scoped lang="scss">
    .login{ 
        margin-top: 30px;
        margin-left: 30px;
    }
    .account{
        width: 500px;
    }
</style>

2.配置页面路由
router 中的 index.js 代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.在Home.vue 实现一个页面跳转按钮
Home.vue 代码如下：

<template>
  <div >
    <el-button 
    type="primary" @click="goTo('/login')">
    去往登录页面
    </el-button>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Home',
  components: {
  },
  methods:{
    goTo(path){ //路由跳转
      this.$router.push(path)
    }
  }
}
</script>

二、组件效果

1.点击前往登录页面，进入登录页面

2.校验手机号，实现了登录的逻辑

总结

以上内容我们在 element-ui 的基础上，对 el-input 和 el-button 组件再封装，使之成为短信验证码登录组件，组件实现了手机号码的校验功能和登录回调的逻辑。