Vue随机验证码组件

组件代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<template>
    <!-- 自定义一个绘制随机验证码的组件，其本质是使用canvas绘制 -->
    <div class="s-canvas">
        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
    </div>
</template>
 
<script>
    export default {
        name: 'SIdentify',
        props: {
            identifyCode: {
                type: String,
                default: '1234'
            },
            fontSizeMin: {
                type: Number,
                default: 16
            },
            fontSizeMax: {
                type: Number,
                default: 40
            },
            backgroundColorMin: {
                type: Number,
                default: 180
            },
            backgroundColorMax: {
                type: Number,
                default: 240
            },
            colorMin: {
                type: Number,
                default: 50
            },
            colorMax: {
                type: Number,
                default: 160
            },
            lineColorMin: {
                type: Number,
                default: 40
            },
            lineColorMax: {
                type: Number,
                default: 180
            },
            dotColorMin: {
                type: Number,
                default: 0
            },
            dotColorMax: {
                type: Number,
                default: 255
            },
            contentWidth: {
                type: Number,
                default: 112
            },
            contentHeight: {
                type: Number,
                default: 38
            }
        },
        methods: {
            // 生成一个随机数
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            },
            // 生成一个随机的颜色
            randomColor(min, max) {
                var r = this.randomNum(min, max)
                var g = this.randomNum(min, max)
                var b = this.randomNum(min, max)
                return 'rgb(' + r + ',' + g + ',' + b + ')'
            },
            drawPic() {
                var canvas = document.getElementById('s-canvas')
                var ctx = canvas.getContext('2d')
                ctx.textBaseline = 'bottom'
                // 绘制背景
                ctx.fillStyle = this.randomColor(
                    this.backgroundColorMin,
                    this.backgroundColorMax
                )
                ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
                // 绘制文字
                for (let i = 0; i < this.identifyCode.length; i++) {
                    this.drawText(ctx, this.identifyCode[i], i)
                }
                this.drawLine(ctx)
                this.drawDot(ctx)
            },
            drawText(ctx, txt, i) {
                ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
                ctx.font =
                    this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
                var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
                var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
                var deg = this.randomNum(-45, 45)
                // 修改坐标原点和旋转角度
                ctx.translate(x, y)
                ctx.rotate(deg * Math.PI / 180)
                ctx.fillText(txt, 0, 0)
                // 恢复坐标原点和旋转角度
                ctx.rotate(-deg * Math.PI / 180)
                ctx.translate(-x, -y)
            },
            drawLine(ctx) {
                // 绘制干扰线
                for (let i = 0; i < 8; i++) {
                    ctx.strokeStyle = this.randomColor(
                        this.lineColorMin,
                        this.lineColorMax
                    )
                    ctx.beginPath()
                    ctx.moveTo(
                        this.randomNum(0, this.contentWidth),
                        this.randomNum(0, this.contentHeight)
                    )
                    ctx.lineTo(
                        this.randomNum(0, this.contentWidth),
                        this.randomNum(0, this.contentHeight)
                    )
                    ctx.stroke()
                }
            },
            drawDot(ctx) {
                // 绘制干扰点
                for (let i = 0; i < 100; i++) {
                    ctx.fillStyle = this.randomColor(0, 255)
                    ctx.beginPath()
                    ctx.arc(
                        this.randomNum(0, this.contentWidth),
                        this.randomNum(0, this.contentHeight),
                        1,
                        0,
                        2 * Math.PI
                    )
                    ctx.fill()
                }
            }
        },
        // 监听--watch中包含immediate属性和deep属性。immediate属性：immediate:true，首次绑定的时候执行watch中的方法；immediate:false，当数据发生变化时执行watch中的方法（首次绑定时不执行）
        watch: {
            identifyCode: {
                handler() {
                  this.drawPic()
                },
                immediate: false
              }
        },
        // mounted 完成挂载：在这发起后端请求，拿回数据，配合路由钩子做一些事情
        mounted() {
            this.drawPic()
        }
    }
</script>
 
<style>
</style>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<template>
    <div class="randomcodeuse">
        <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
            <!-- 随机验证码 输入框 -->
            <el-form-item prop="verifycode">
                <el-input v-model="loginForm.verifycode" placeholder="请输入验证码" class="identifyinput"></el-input>
            </el-form-item>
            <!-- 随机验证码 -->
            <el-form-item>
                <div class="identifybox">
                    <div @click="refreshCode">
                        <s-identify :identifyCode="identifyCode"></s-identify>
                    </div>
                    <!-- 刷新验证码 -->
                    <el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
 
<script>
    import SIdentify from './RandomCode.vue'
    export default {
        name: 'userlogin',
        data() {
            // 自定义验证规则：验证码验证规则
            const validateVerifycode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码'))
                } else if (value !== this.identifyCode) {
                    console.log('validateVerifycode:', value)
                    callback(new Error('验证码不正确'))
                } else {
                    callback()
                }
            }
            return {
                loginForm: {
                    verifycode: ''
                },
                identifyCodes: '1234567890',
                identifyCode: '',
                loginRules: {
                    verifycode: [
                        { required: true, trigger: 'blur', validator: validateVerifycode },
                    ]
                }
            }
        },
        components: {
            // 注册绘制随机验证码的组件
            SIdentify
        },
        created() {},
        mounted() {
            // 验证码初始化
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        computed: {},
        methods: {
            // 生成随机数
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            },
            // 切换验证码
            refreshCode() {
                this.identifyCode = ''
                this.makeCode(this.identifyCodes, 4)
            },
            // 生成四位随机验证码
            makeCode(o, l) {
                for (let i = 0; i &lt; l; i++) {
                    this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
                }
                console.log(this.identifyCode)
            }
        }
    }
</script>
 
<style scoped>
    .randomcodeuse{
        width: 60%;
        margin: auto;
        display: flex;
        align-items: center;
    }
    .identifybox {
        display: flex;
        justify-content: space-between;
        margin-top: 7px;
    }
    .iconstyle {
        color: #409EFF;
    }
</style>
posted @   岁月淡忘了谁  阅读(782)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
· 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
· Vue树形单选选择器
· 验证码功能
· vue 图形验证码
· vue2 图形验证码
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示