Vue3封装登录功能的两种实现

方法一： 使用用户名和密码进行登录

封装代码：

<template>
  <el-form
      ref="ruleFormRef"
      status-icon
      :model="ruleForms"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
  >
    <el-form-item label="用户名：" prop="username">
      <el-input v-model="ruleForms.username" autocomplete="off">
        <template #prefix>
          <el-icon class="el-input__icon">
            <user/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="密码：" prop="password">
      <el-input type="password" v-model="ruleForms.password" placeholder="Type something">
        <template #prefix>
          <el-icon class="el-input__icon">
            <search/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleLogin">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {User, Search} from '@element-plus/icons-vue'
import {defineProps, reactive, ref, defineEmits, onMounted, watch} from 'vue'

let ruleForms = reactive({username: '', password: ''})
const ruleFormRef = ref(null)
const emits = defineEmits(['onSubmit', 'onError'])

const props = defineProps({
  ruleForm: {
    type: Object,
    required: true
  },
  rules: {
    type: Object,
    required: true
  }
})

onMounted(() => {
  ruleForms = props.ruleForm
})

watch(
    () => props.ruleForm,
    val => {
      ruleForms = val
    },
    {immediate: true}
)

// 登录功能
const handleLogin = () => {
  ruleFormRef.value.validate(valid => {
    if (valid) {
      emits('onSubmit')
    } else {
      emits('onError')
    }
  })
}
</script>

<style scoped>

</style>

使用：

<template>
  <div class="login">

    <div class="account-panel">
      <account-login
          :ruleForm="ruleForm"
          :rules="rules"
          @onSubmit="onSubmit"
          @onError="onError"
      />
    </div>
  </div>
</template>

<script setup>
import {reactive} from 'vue'
import {ElMessage} from 'element-plus'


const ruleForm = reactive({
  username: '',
  password: ''
})
const rules = reactive({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: '用户名长度在2-6之间'
    }
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      validator: '密码不能为空'
    }
  ]
})
const onSubmit = () => {
  alert('发送 http请求：')
  ElMessage({
    type: 'success',
    message: '保存成功'
  })
}
const onError = () => {
  ElMessage({
    type: 'warning',
    message: '校验失败'
  })
}

</script>

<style scoped lang="scss">
.login {
  margin-top: 50px;
  margin-left: 20px;
}

.account-panel {
  width: 350px;
  height: 350px;
}
</style>

方法二： 使用手机验证码登录

封装代码：

<template>
  <div>
    <el-form :model="rulesForm" :rules="rules" ref="rulesRef">
      <el-form-item label="手机号：" prop="phone">
        <el-input v-model="rulesForm.phone" placeholder="请输入手机号">
        </el-input>
      </el-form-item>
      <el-form-item label="验证码：" prop="countDown">
        <el-row :gutter="24">
          <el-col :span="18">
            <el-input v-model="rulesForm.countDown" placeholder="验证码"></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" @click="handleLogin">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {defineProps, ref, reactive, watch, defineEmits} from 'vue'
import {ElMessage} from "element-plus";

const 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('请输入正确的手机号！'))
    }
  }
}

const rulesForm = ref({})
const disabled = ref(false)
const btnText = ref('发送验证码')

const props = defineProps({
  ruleForm: {
    type: Object,
    required: true
  },
  countDown: {
    type: Number,
    required: true
  }
})
const emits = defineEmits(['sendCode'])
const rules = reactive({
  phone: [{required: true, trigger: 'change', validator: checkPhone,}],
  countDown: [{required: true, message: '验证码不能为空'}]
})
const rulesRef = ref(null)
const time = ref(0) // 设置倒计时

// 发送验证码
const sendCode = () => {
  // 手机号必须输入正确，如果不正确，就提示
  rulesRef.value.validateField('phone', errMessage => {
    if (!errMessage) {
      ElMessage({
        type: 'error',
        message: '请输入正确的手机号'
      })
    } else {
      // 1、时间开始倒数
      // 2、按钮进入禁用状态
      // 3、如果倒计时结束，按钮恢复可用状态，按钮文字变成重新发送
      // 4、倒计时的过程中，按钮文字为多少秒后重新发送
      time.value = props.countDown
      let timer = setInterval(() => {
        time.value--
        btnText.value = `${time.value}s后重新发送`
        disabled.value = true
        if (time.value === 0) {
          disabled.value = false
          btnText.value = '重新发送'
          time.value = props.countDown
          clearInterval(timer)
        }
      }, 1000)
      emits('sendCode')
    }
  })
}

// 登录功能
const handleLogin = () => {
  rulesRef.value.validate(valid => {
    if (valid) {
      emits('onSubmit')
    } else {
      emits('onError')
    }
  })
}
watch(
    () => props.ruleForm,
    val => {
      rulesForm.value = val
    },
    {immediate: true}
)

</script>

<style scoped>

</style>

使用：

<template>
  <div class="login-panel">
    <div class="phone-login">
      <phone-login
          :ruleForm="ruleForm"
          :countDown="countDown"
          @sendCode="sendCode"
          @onSubmit="onSubmit"
          @onError="onError"
      >
      </phone-login>
    </div>

  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";

const ruleForm = reactive({
  phone: '',
  countDown: ''
})
const countDown = ref(30)

const sendCode = () => {
  // 发送验证码接口
  ElMessage({
    type: 'success',
    message: '发送验证码成功'
  })
}

const onSubmit = () => {
  alert('发送 http请求：')
  ElMessage({
    type: 'success',
    message: '保存成功'
  })
}

const onError = () => {
  ElMessage({
    type: 'warning',
    message: '校验失败'
  })
}
</script>

<style scoped lang="scss">
.login-panel {
  margin-left: 20px;
  margin-top: 20px;
}

.phone-login {
  width: 350px;
  height: 350px;
}
</style>