資訊專欄INFORMATION COLUMN
摘要：最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊的時候需要一個驗證碼組件去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。
最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊UI的時候需要一個驗證碼組件. 去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。演示 分析驗證碼組件
分析驗證碼功能
隨機出現的數字大小寫字母 （基礎功能）
不同的數字或者字母有不同的顏色 (功能優化)
不同的數字或者字母有不同的字體大寫 (功能優化)
不同的數字或者字母有不同的邊距 (功能優化)
不同的數字或者字母有不同的傾斜角度 (功能優化)
更多功能優化...
分析組件功能
可以設置生成驗證碼的長度 (基本功能)
可以設置驗證碼組件的寬高 (基本功能)
template
最外層div綁定點擊事件，點擊后刷新驗證碼。
span是單個驗證碼的載體，樣式動態綁定
{{item.code}}
methods
refreshCode 刷新驗證碼的方法
createdCode 生成驗證碼的方法
getStyle 為每個元素生成動態的樣式
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`, // 隨機內邊距
transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)` // 隨機旋轉角度
})
}
// 指向
this.codeList = codeList
// 將當前數據派發出去
this.$emit("update:value", codeList.map(item => item.code).join(""))
},
// 動態綁定樣式
getStyle (data) {
return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
}
}
完整代碼
使用
組件
{{item.code}}
源碼地址
演示地址 模仿思否寫的網站，點注冊可看到驗證碼
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53604.html
摘要：最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊的時候需要一個驗證碼組件去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。 最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊UI的時候需要一個驗證碼組件. 去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。 演示 showImg(https://segmentfault.com/img/bVbnyrp?w=...
摘要：最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊的時候需要一個驗證碼組件去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。 最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊UI的時候需要一個驗證碼組件. 去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。 演示 showImg(https://segmentfault.com/img/bVbnyrp?w=...
摘要：生成驗證碼圖形驗證碼校驗驗證碼生成驗證碼圖形驗證碼校驗驗證碼生成其他類型驗證碼生成圖片驗證碼主要為或者前后端分離設計。校驗圖片驗證碼。 驗證碼效果 showImg(https://segmentfault.com/img/remote/1460000018639417?w=108&h=40);showImg(https://segmentfault.com/img/remote/146...
摘要：仿滴滴出行項目最近，各大社區出現很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目。可是，后來在手機上發現，輸入的時候居然調不出軟鍵盤，寫項目的時候沒考慮到設備問題，簡直是大大的失誤。也就是說可以在組件內部進行請求，不需要提交。 Vue2.0 仿滴滴出行項目 最近，各大社區出現很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。 效果預覽 showImg(h...
摘要：簡介最近寫了一個基于權限管理系統的后臺模板，包含了正常項目開發所需的框架功能，開發者使用的時候只需要專注于項目的業務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 簡介 最近寫了一個基于vue2.0+element-ui權限管理系統的后臺模板，包含了正常項目開發所需的框架功能，開發者使用的時候只需要專注于項目的業務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 源碼地址...
閱讀 888·2021-09-22 15:17
閱讀 1917·2021-09-22 15:06
閱讀 2211·2021-09-08 09:35
閱讀 5099·2021-09-01 11:43
閱讀 3476·2019-08-30 15:55
閱讀 2150·2019-08-30 12:48
閱讀 3150·2019-08-30 12:45
閱讀 1782·2019-08-29 17:31
