加速度
轉(zhuǎn)眼又到端午放假纵柿，趁著這期間再整理一篇蜈抓，這個(gè)小項(xiàng)目不大，但是時(shí)間拖的比較久昂儒，期間浪費(fèi)了不少時(shí)間沟使，加快速度，爭(zhēng)取早點(diǎn)結(jié)束掉渊跋。
0. 其它
vue實(shí)戰(zhàn)（1）：準(zhǔn)備與資料整理
vue實(shí)戰(zhàn)（2）：初始化項(xiàng)目腊嗡、搭建底部導(dǎo)航路由
vue實(shí)戰(zhàn)（3）：底部導(dǎo)航顯示、搭建各模塊靜態(tài)頁(yè)面拾酝、添加登錄頁(yè)頁(yè)面與路由
vue實(shí)戰(zhàn)（4）：postman測(cè)試數(shù)據(jù)燕少、封裝ajax、使用vuex管理狀態(tài)
vue實(shí)戰(zhàn)（5）：總結(jié)一
vue實(shí)戰(zhàn)（6）：異步顯示數(shù)據(jù)蒿囤、開(kāi)發(fā)Star組件
vue實(shí)戰(zhàn)（7）：完整開(kāi)發(fā)登錄頁(yè)面（一）
vue實(shí)戰(zhàn)（8）：完整開(kāi)發(fā)登錄頁(yè)面（二）
vue實(shí)戰(zhàn)（9）：總結(jié)二
vue實(shí)戰(zhàn)（10）：開(kāi)發(fā)店鋪詳情（一）
vue實(shí)戰(zhàn)（11）：開(kāi)發(fā)店鋪詳情（二）
vue實(shí)戰(zhàn)（12）：完結(jié) + 附學(xué)習(xí)視頻
1. 界面相關(guān)效果
這一部分內(nèi)容客们，回到之前完成的 Login.vue 頁(yè)面，做邏輯之前先完成一些必要的效果材诽。
-
切換登錄
1）設(shè)置布爾值logingwey: true, // 短信登錄為true,密碼登錄為false
2）設(shè)置相關(guān) class
登錄切換.gif
-
手機(jī)號(hào)合法檢查
1）判斷輸入的手機(jī)號(hào)的位數(shù)
computed: {
// 返回true或者false底挫，用test（），判斷是否輸入了11位1開(kāi)頭的數(shù)字
logincode () {
return /^1\d{10}$/.test(this.phone)
}
},
2）判斷是否可以發(fā)送驗(yàn)證碼
<button :disabled="!logincode"
class="get_verification"
:class="{login_code: logincode}"
@click.prevent ="righttime">
{{timenum > 0 ? `已發(fā)送${timenum}s` : '獲取驗(yàn)證碼'}}
</button>
-
倒計(jì)時(shí)效果
1）設(shè)置倒計(jì)時(shí)為30秒
righttime () {
// 倒計(jì)時(shí)
if (!this.timenum) {
this.timenum = 30 // 初始值為30秒
let clertime = setInterval(() => { // 計(jì)時(shí)器
this.timenum--
if (this.timenum <= 0) { // 如果減到0則清楚計(jì)時(shí)器
clearInterval(clertime)
}
}, 1000)
// ajax請(qǐng)求
}
}
-
切換顯示或隱藏密碼
1）兩個(gè) input 設(shè)置密碼顯示與隱藏
<section class="login_verification">
<input type="password" maxlength="8" placeholder="密碼"
v-if="showpwd" v-model="pwd">
<input type="text" maxlength="8" placeholder="密碼"
v-else v-model="pwd">
<div class="switch_button " :class="showpwd ? 'on' : 'off'"
@click="showpwd = !showpwd">
<div class=""></div>
<span class="switch_text">{{showpwd ? '顯示' : 'abc'}}</span>
</div>
</section>
-
前臺(tái)驗(yàn)證提示
1）新建 AlertTip 文件夾與 AlertTip.vue 文件
2）搭好頁(yè)面與 css
<template>
<div class="alert_container">
<section class="tip_text_container">
<div class="tip_icon">
<span></span>
<span></span>
</div>
<p class="tip_text">{{alertText}}</p>
<div class="confrim" @click="closeTip">確認(rèn)</div>
</section>
</div>
</template>
<script>
export default {
props: {
alertText: String
},
methods: {
closeTip () {
// 分發(fā)自定義事件
this.$emit('closeTip')
}
}
}
</script>
3）login.vue 頁(yè)調(diào)用并判斷
showalert (alertText) {
this.alertshow = true
this.alertText = alertText
},
// 登錄
login () {
if (this.logingwey) { // 短信登錄
const { logincode, phone, code } = this
if (!this.logincode) {
// 手機(jī)號(hào)有誤
this.showalert('手機(jī)號(hào)有誤')
} else if (!this.code) {
// 驗(yàn)證碼有誤
this.showalert('驗(yàn)證碼有誤')
}
} else { // 密碼登錄
const { name, pwd, captcha } = this
if (!this.name) {
// 用戶(hù)名不能為空
this.showalert('用戶(hù)名不能為空')
} else if (!this.pwd) {
// 密碼不能為空
this.showalert('密碼不能為空')
} else if (!this.captcha) {
// 驗(yàn)證碼有誤
this.showalert('驗(yàn)證碼有誤')
}
}
},
closeTip () {
this.alertshow = false
this.alertText = ''
}
2. 動(dòng)態(tài)一次性圖形驗(yàn)證碼
- 把 src 換成接口
<img class="get_verification" src="http://localhost:4000/captcha" @click="getCaptcha" ref="captchas" alt="captcha"> - 添加點(diǎn)擊事件脸侥，點(diǎn)擊刷新圖片
// 刷新圖片驗(yàn)證碼
getCaptcha () {
this.$refs.captchas.src = `http://localhost:4000/captcha?time=${Date.now()}`
}
-
$refs的基本用法
VUE中$refs的基本用法
圖片驗(yàn)證碼刷新.gif
3. 結(jié)束
放在一篇有點(diǎn)長(zhǎng)凄敢，分第二篇
