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

更新時間：2022年03月17日 10:13:59 作者：柒個M

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

方法一：使用用戶名和密碼進行登錄

封裝代碼：

<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('發(fā)送 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('發(fā)送驗證碼')
 
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) // 設置倒計時
 
// 發(fā)送驗證碼
const sendCode = () => {
  // 手機號必須輸入正確，如果不正確，就提示
  rulesRef.value.validateField('phone', errMessage => {
    if (!errMessage) {
      ElMessage({
        type: 'error',
        message: '請輸入正確的手機號'
      })
    } else {
      // 1、時間開始倒數(shù)
      // 2、按鈕進入禁用狀態(tài)
      // 3、如果倒計時結束，按鈕恢復可用狀態(tài)，按鈕文字變成重新發(fā)送
      // 4、倒計時的過程中，按鈕文字為多少秒后重新發(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ā)送驗證碼接口
  ElMessage({
    type: 'success',
    message: '發(fā)送驗證碼成功'
  })
}
 
const onSubmit = () => {
  alert('發(fā)送 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封裝登錄功能的兩種實現(xiàn)的文章就介紹到這了,更多相關Vue3 登錄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue3
登錄

vue3??mark.js?實現(xiàn)文字標注功能(案例代碼)
這篇文章主要介紹了vue3??mark.js?實現(xiàn)文字標注功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-09-09
Vue?全部生命周期組件梳理整理
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實例初始化之后,進行數(shù)據(jù)偵聽和事件，偵聽器的配置之前同步調用
2022-06-06
vue?懶加載組件chunk相對路徑混亂問題及解決
這篇文章主要介紹了vue?懶加載組件chunk相對路徑混亂問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue打開子組件彈窗都刷新功能的實現(xiàn)
這篇文章主要介紹了vue打開子組件彈窗都刷新功能的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
解決vuex數(shù)據(jù)異步造成初始化的時候沒值報錯問題
今天小編大家分享一篇解決vuex數(shù)據(jù)異步造成初始化的時候沒值報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue使用once修飾符,使事件只能觸發(fā)一次問題
這篇文章主要介紹了vue使用once修飾符,使事件只能觸發(fā)一次問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue實現(xiàn)組件之間傳值功能示例
這篇文章主要介紹了vue實現(xiàn)組件之間傳值功能,結合實例形式分析了vue.js父子組件之間相互傳值常見操作技巧,需要的朋友可以參考下
2018-07-07
vue.js element-ui tree樹形控件改iview的方法
這篇文章主要介紹了vue.js element-ui tree樹形控件改iview的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
Vue檢測屏幕變化來改變不同的charts樣式實例
這篇文章主要介紹了Vue檢測屏幕變化來改變不同的charts樣式實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vue?插件及瀏覽器本地存儲
這篇文章主要介紹了Vue?插件及瀏覽器本地存儲，插件通常用來為Vue添加全局功能，包含install方法的一個對象。更多相關介紹，需要的小伙伴可以參考下面文章內容
2022-05-05