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>

到此这篇关于Vue3封装登录功能的两种实现的文章就介绍到这了,更多相关Vue3 登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！