标签：vue const 前端 random 验证码 item codeList data Math

验证码

<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',
        model:{
            prop:'value',
            event:'input'
        },
        props:{
            width:{
                type:String,
                default:'100px'
            },
            height:{
                type:String,
                default:'40px'
            },
            length:{
                type:Number,
                default:4
            },
            refresh:{
                type:Number
            }
        },
        data(){
            return{
               codeList:[]
            }
        },
        watch:{
            refresh(){
                this.createdCode()
            }
        },
        mounted(){
            this.createdCode()
        },
        methods: {
            refreshCode() {
                this.createdCode()
            },
            createdCode() {
                const len = this.length
                const codeList = []
                const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefghjkmnpqrstwxyz0123456789'
                const charsLen = chars.length
                //生成
                for (let i = 0; i < len; i++) {
                    const 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: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,
                        padding: `${[Math.floor(Math.random() * 10)]}px`,
                        transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
                    })
                }
                //指向
                this.codeList = codeList
                //将当前数据派发出去
                //console.log(codeList,map(item=>item.code).join(''))
                this.$emit('input', 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>
.ValidCode{
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}
.ValidCode span{
    display: inline-block;
}
</style>
​
​

标签：vue,const,前端,random,验证码,item,codeList,data,Math
来源： https://www.cnblogs.com/shiyi1/p/16538880.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。