基於vue的驗證碼元件
摘要：
最近在自己寫頁面，模仿思否論壇，然後寫登入註冊UI的時候需要一個驗證碼元件. 去搜一下沒找到什麼合適的，而且大多都是基於後端的，於是自己手寫一個。
演示
分析驗證碼元件
分析驗證碼功能
隨機出現的數字大小寫字母 （基礎功能）
不同的數字或者字母有不同...
最近在自己寫頁面，模仿思否論壇，然後寫登入註冊UI的時候需要一個驗證碼元件. 去搜一下沒找到什麼合適的，而且大多都是基於後端的，於是自己手寫一個。
演示
分析驗證碼元件
分析驗證碼功能
- 隨機出現的數字大小寫字母 （基礎功能）
- 不同的數字或者字母有不同的顏色 (功能優化)
- 不同的數字或者字母有不同的字型大寫 (功能優化)
- 不同的數字或者字母有不同的邊距 (功能優化)
- 不同的數字或者字母有不同的傾斜角度 (功能優化)
- 更多功能優化...
分析元件功能
- 可以設定生成驗證碼的長度 (基本功能)
- 可以設定驗證碼元件的寬高 (基本功能)
編寫驗證碼元件
template
最外層div繫結點選事件，點選後重新整理驗證碼。
span是單個驗證碼的載體，樣式動態繫結
<template>
<div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
<span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
</div>
</template>
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}`
}
}
完整程式碼
使用
<valid-code :value.sync="validCode"></valid-code>
元件
<template>
<div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
<span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
</div>
</template>
<script>
export default {
name: 'validCode',
props: {
width: {
type: String,
default: '100px'
},
height: {
type: String,
default: '40px'
},
length: {
type: Number,
default: 4
}
},
data () {
return {
codeList: []
}
},
mounted () {
this.createdCode()
},
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}`
}
}
}
</script>
<style scoped lang="scss">
.ValidCode{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
span{
display: inline-block;
}
}
</style>
演示地址 模仿思否寫的網站，剛開始寫，還在寫UI頁面，給自己加油，哈哈