快捷導(dǎo)航

Vue3封裝登錄功能的兩種實(shí)現(xiàn)

更新時(shí)間：2022年03月17日 10:13:59 作者：柒個(gè)M

本文主要介紹了Vue3封裝登錄功能的兩種實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

方法一：使用用戶名和密碼進(jìn)行登錄

封裝代碼：

<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: '用戶名長(zhǎng)度在2-6之間'
    }
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      validator: '密碼不能為空'
    }
  ]
})
const onSubmit = () => {
  alert('發(fā)送 http請(qǐng)求：')
  ElMessage({
    type: 'success',
    message: '保存成功'
  })
}
const onError = () => {
  ElMessage({
    type: 'warning',
    message: '校驗(yàn)失敗'
  })
}
 
</script>
 
<style scoped lang="scss">
.login {
  margin-top: 50px;
  margin-left: 20px;
}
 
.account-panel {
  width: 350px;
  height: 350px;
}
</style>

方法二：使用手機(jī)驗(yàn)證碼登錄

封裝代碼：

<template>
  <div>
    <el-form :model="rulesForm" :rules="rules" ref="rulesRef">
      <el-form-item label="手機(jī)號(hào)：" prop="phone">
        <el-input v-model="rulesForm.phone" placeholder="請(qǐng)輸入手機(jī)號(hào)">
        </el-input>
      </el-form-item>
      <el-form-item label="驗(yàn)證碼：" prop="countDown">
        <el-row :gutter="24">
          <el-col :span="18">
            <el-input v-model="rulesForm.countDown" placeholder="驗(yàn)證碼"></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('手機(jī)號(hào)不能為空！'))
  } else {
    let reg = /^1[3|4|5|7|8][0-9]\d{8}$/
    if (reg.test(value)) {
      callback()
    } else {
      return callback(new Error('請(qǐng)輸入正確的手機(jī)號(hào)！'))
    }
  }
}
 
const rulesForm = ref({})
const disabled = ref(false)
const btnText = ref('發(fā)送驗(yàn)證碼')
 
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: '驗(yàn)證碼不能為空'}]
})
const rulesRef = ref(null)
const time = ref(0) // 設(shè)置倒計(jì)時(shí)
 
// 發(fā)送驗(yàn)證碼
const sendCode = () => {
  // 手機(jī)號(hào)必須輸入正確，如果不正確，就提示
  rulesRef.value.validateField('phone', errMessage => {
    if (!errMessage) {
      ElMessage({
        type: 'error',
        message: '請(qǐng)輸入正確的手機(jī)號(hào)'
      })
    } else {
      // 1、時(shí)間開始倒數(shù)
      // 2、按鈕進(jìn)入禁用狀態(tài)
      // 3、如果倒計(jì)時(shí)結(jié)束，按鈕恢復(fù)可用狀態(tài)，按鈕文字變成重新發(fā)送
      // 4、倒計(jì)時(shí)的過(guò)程中，按鈕文字為多少秒后重新發(fā)送
      time.value = props.countDown
      let timer = setInterval(() => {
        time.value--
        btnText.value = `${time.value}s后重新發(fā)送`
        disabled.value = true
        if (time.value === 0) {
          disabled.value = false
          btnText.value = '重新發(fā)送'
          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 = () => {
  // 發(fā)送驗(yàn)證碼接口
  ElMessage({
    type: 'success',
    message: '發(fā)送驗(yàn)證碼成功'
  })
}
 
const onSubmit = () => {
  alert('發(fā)送 http請(qǐng)求：')
  ElMessage({
    type: 'success',
    message: '保存成功'
  })
}
 
const onError = () => {
  ElMessage({
    type: 'warning',
    message: '校驗(yàn)失敗'
  })
}
</script>
 
<style scoped lang="scss">
.login-panel {
  margin-left: 20px;
  margin-top: 20px;
}
 
.phone-login {
  width: 350px;
  height: 350px;
}
</style>

到此這篇關(guān)于Vue3封裝登錄功能的兩種實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3 登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: