資訊專欄INFORMATION COLUMN
摘要：最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊的時候需要一個驗證碼組件去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。
最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊UI的時候需要一個驗證碼組件. 去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。演示 分析驗證碼組件
分析驗證碼功能
隨機出現(xiàn)的數(shù)字大小寫字母 （基礎(chǔ)功能）
不同的數(shù)字或者字母有不同的顏色 (功能優(yōu)化)
不同的數(shù)字或者字母有不同的字體大寫 (功能優(yōu)化)
不同的數(shù)字或者字母有不同的邊距 (功能優(yōu)化)
不同的數(shù)字或者字母有不同的傾斜角度 (功能優(yōu)化)
更多功能優(yōu)化...
分析組件功能
可以設(shè)置生成驗證碼的長度 (基本功能)
可以設(shè)置驗證碼組件的寬高 (基本功能)
編寫驗證碼組件template
最外層div綁定點擊事件，點擊后刷新驗證碼。
span是單個驗證碼的載體，樣式動態(tài)綁定
{{item.code}}
methods
refreshCode 刷新驗證碼的方法
createdCode 生成驗證碼的方法
getStyle 為每個元素生成動態(tài)的樣式
methods: {
refreshCode () {
this.createdCode()
},
createdCode () {
let len = this.length,
codeList = [],
chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
charsLen = chars.length
// 生成
for (let i = 0; i < len; i++) {
let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
codeList.push({
code: chars.charAt(Math.floor(Math.random() * charsLen)), // 隨機碼
color: `rgb(${rgb})`, // 隨機顏色
fontSize: `1${[Math.floor(Math.random() * 10)]}px`, // 隨機字號
padding: `${[Math.floor(Math.random() * 10)]}px`, // 隨機內(nèi)邊距
transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)` // 隨機旋轉(zhuǎn)角度
})
}
// 指向
this.codeList = codeList
// 將當前數(shù)據(jù)派發(fā)出去
this.$emit("update:value", codeList.map(item => item.code).join(""))
},
// 動態(tài)綁定樣式
getStyle (data) {
return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
}
}
完整代碼
使用
組件
{{item.code}}
源碼地址
演示地址 模仿思否寫的網(wǎng)站，點注冊可看到驗證碼
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117272.html
摘要：最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊的時候需要一個驗證碼組件去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。 最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊UI的時候需要一個驗證碼組件. 去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。 演示 showImg(https://segmentfault.com/img/bVbnyrp?w=...
摘要：最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊的時候需要一個驗證碼組件去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。 最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊UI的時候需要一個驗證碼組件. 去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。 演示 showImg(https://segmentfault.com/img/bVbnyrp?w=...
摘要：生成驗證碼圖形驗證碼校驗驗證碼生成驗證碼圖形驗證碼校驗驗證碼生成其他類型驗證碼生成圖片驗證碼主要為或者前后端分離設(shè)計。校驗圖片驗證碼。 驗證碼效果 showImg(https://segmentfault.com/img/remote/1460000018639417?w=108&h=40);showImg(https://segmentfault.com/img/remote/146...
摘要：仿滴滴出行項目最近，各大社區(qū)出現(xiàn)很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目。可是，后來在手機上發(fā)現(xiàn)，輸入的時候居然調(diào)不出軟鍵盤，寫項目的時候沒考慮到設(shè)備問題，簡直是大大的失誤。也就是說可以在組件內(nèi)部進行請求，不需要提交。 Vue2.0 仿滴滴出行項目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。 效果預覽 showImg(h...
摘要：簡介最近寫了一個基于權(quán)限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 簡介 最近寫了一個基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 源碼地址...
閱讀 2134·2021-09-27 14:04
閱讀 1878·2019-08-30 15:55
閱讀 1703·2019-08-30 13:13
閱讀 1069·2019-08-30 13:07
閱讀 2749·2019-08-29 15:20
閱讀 3244·2019-08-29 12:42
閱讀 3340·2019-08-28 17:58
閱讀 3596·2019-08-28 17:56
