最近在自己寫頁面，模仿思否論壇，然后寫登錄注冊UI的時候需要一個驗證碼組件. 去搜一下沒找到什么合適的，而且大多都是基于后端的，于是自己手寫一個。
演示
分析驗證碼組件
分析驗證碼功能
分析組件功能
編寫驗證碼組件
template
最外層div綁定點擊事件，點擊后刷新驗證碼。
span是單個驗證碼的載體，樣式動態綁定
<template>
<div class="ValidCode disabled-select" : @click="refreshCode">
<span v-for="(item, index) in codeList" :key="index" :>{{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" : @click="refreshCode">
<span v-for="(item, index) in codeList" :key="index" :>{{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>
源碼地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
