精华内容
下载资源
问答
  • vue验证码实现

    2020-11-12 10:38:44
    Ant Design vue验证码实现验证码组件(子组件)注册组件(父组件)效果说明实现思路父组件完整代码 验证码组件(子组件) #Verification.vue <template> <div class="s-canvas"> <canvas id="s-...

    验证码组件(子组件)

    #Verification.vue

    <template>
        <div class="s-canvas">
            <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
        </div>
    </template>
    
    <script>
        export default {
            name: "Verification",
            //定义props数据可以通过父组件向子组件传递随机数让子组件渲染成验证码
            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) {
                    let r = this.randomNum(min, max)
                    let g = this.randomNum(min, max)
                    let b = this.randomNum(min, max)
                    return 'rgb(' + r + ',' + g + ',' + b + ')'
                },
                drawPic() {
                    let canvas = document.getElementById('s-canvas')
                    let 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'
                    let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
                    let 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: {
                identifyCode() {
                    this.drawPic()
                }
            },
            mounted() {
                this.drawPic()
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    

    注册组件(父组件)

    关于验证码部分的片段

    <a-form-item
                    v-bind="formItemLayout"
                    label="Captcha"
                    extra="We must make sure that your are a human."
    
            >
                <a-row :gutter="8">
                    <a-col :span="6">
                        <a-input v-decorator="[
                  'captcha',
                  { rules: [{ required: true, message: '请输入验证码!' },{validator:validateCode,}] },
                ]"/>
                    </a-col>
                    <a-col :span="12" @click="refreshCode">
                        <Verification :identifyCode="identifyCode"></Verification>
                    </a-col>
                </a-row>
            </a-form-item>
    

    父组件js部分

    <script>
        import Verification from "./Verification";
    
        export default {
            name: "register",
            components:{
                Verification
            },
            data() {
                return {
                    identifyCodes: '1234567890',
                    identifyCode: '',
                    formItemLayout: {
                        labelCol: {
                            xs: { span: 24 },
                            sm: { span: 8 },
                        },
                        wrapperCol: {
                            xs: { span: 24 },
                            sm: { span: 16 },
                        },
                    },
                };
            },
            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 < l; i++) {
                        this.identifyCode += this.identifyCodes[
                            this.randomNum(0, this.identifyCodes.length)
                            ]
                    }
                },
                //validator的验证方法,value为输入框输入的值,callback定义的是返回的提示。在antd的v-decorator表单验证中,callback()带值,则提交不了表单,比如这样callback('123')即时callback('')也不行。
                validateCode(rule, value, callback) {
                    const identifyCode = this.identifyCode
                    if (identifyCode !== value) {
                        callback('请输入正确的验证码');
                    } else {
                        callback();
                    }
                },
            },
            //保证每次刷新都进行验证码的更新
            created() {
                this.refreshCode()
            }
        }
    </script>
    

    效果

    说明

    该验证码因为用的是antd的v-decorator的数据验证,所以效果是在输入时就会有提示是否输入正确,而不是在提交表单之后才给提示。若是要后者的效果,选择用在form表单标签写数据验证规则。

    实现思路

    父组件创建一个随机值—>子组件接收值通过canvas 绘制验证码。
    传值:子组件上建立props数据表

    export default {
            name: "Verification",
            props: {
                identifyCode: {
                    type: String,
                    default: '1234'
                },
                }
                }
    

    父组件在调用子组件时在其标签上用冒号加变量名引用传值:

    <Verification :identifyCode="identifyCode"></Verification>//冒号里的identifyCode为要穿给子组件的数据
    

    父组件向子组件传值参考:https://www.cnblogs.com/shengnan-2017/p/10419050.html

    父组件完整代码

    #register.vue

    <template>
        <a-form :form="form"  class="register1"  @submit="handleSubmit">
            <a-form-item v-bind="formItemLayout" label="邮箱">
                <a-input
                        v-decorator="[
              'email',
              {
                rules: [
                  {
                    type: 'email',
                    message: 'The input is not valid E-mail!',
                  },
                  {
                    required: true,
                    message: 'Please input your E-mail!',
                  },
                ],
              },
            ]"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
                <a-input
                        v-decorator="[
              'password',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                  {
                    validator: validateToNextPassword,
                  },
                ],
              },
            ]"
                        type="password"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
                <a-input
                        v-decorator="[
              'confirm',
              {
                rules: [
                  {
                    required: true,
                    message: '请确认您的密码!',
                  },
                  {
                    validator: compareToFirstPassword,
                  },
                ],
              },
            ]"
                        type="password"
                        @blur="handleConfirmBlur"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout">
          <span slot="label">
            昵称&nbsp;
            <a-tooltip title="网络世界真真假假假假真真">
              <a-icon type="question-circle-o" />
            </a-tooltip>
          </span>
                <a-input
                        v-decorator="[
              'nickname',
              {
                rules: [{ required: true, message: '请输入昵称!', whitespace: true }],
              },
            ]"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="电话号码">
                <a-input
                        v-decorator="[
              'phone',
              {
                rules: [{ required: true, message: '请输入你的电话号码!' }],
              },
            ]"
                        style="width: 100%"
                >
                    <a-select
                            slot="addonBefore"
                            v-decorator="['prefix', { initialValue: '86' }]"
                            style="width: 70px"
                    >
                        <a-select-option value="86">
                            +86
                        </a-select-option>
                        <a-select-option value="87">
                            +87
                        </a-select-option>
                    </a-select>
                </a-input>
            </a-form-item>
    
            <a-form-item
                    v-bind="formItemLayout"
                    label="Captcha"
                    extra="We must make sure that your are a human."
    
            >
                <a-row :gutter="8">
                    <a-col :span="6">
                        <a-input v-decorator="[
                  'captcha',
                  { rules: [{ required: true, message: '请输入验证码!' },{validator:validateCode,}] },
                ]"/>
                    </a-col>
                    <a-col :span="12" @click="refreshCode">
                        <Verification :identifyCode="identifyCode"></Verification>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item v-bind="tailFormItemLayout">
                <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
                    I have read the
                    <a href="">
                        agreement
                    </a>
                </a-checkbox>
            </a-form-item>
            <a-form-item v-bind="tailFormItemLayout">
                <a-button type="primary" html-type="submit" >
                    Register
                </a-button>
            </a-form-item>
        </a-form>
    </template>
    
    <script>
        import Verification from "./Verification";
    
        export default {
            name: "register",
            components:{
                Verification
            },
    
            data() {
                return {
                    isDebugLogin: false,
                    confirmDirty: false,
                    identifyCodes: '1234567890',
                    identifyCode: '',
                    code:'',
                    autoCompleteResult: [],
                    formItemLayout: {
                        labelCol: {
                            xs: { span: 24 },
                            sm: { span: 8 },
                        },
                        wrapperCol: {
                            xs: { span: 24 },
                            sm: { span: 16 },
                        },
                    },
                    tailFormItemLayout: {
                        wrapperCol: {
                            xs: {
                                span: 24,
                                offset: 0,
                            },
                            sm: {
                                span: 16,
                                offset: 8,
                            },
                        },
                    },
                };
            },
            beforeCreate() {
                this.form = this.$form.createForm(this, { name: 'register' });
            },
            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 < l; i++) {
                        this.identifyCode += this.identifyCodes[
                            this.randomNum(0, this.identifyCodes.length)
                            ]
                    }
                },
                handleSubmit(e) {
                    e.preventDefault();
                    this.form.validateFieldsAndScroll((err, values) => {
                        if (!err) {
                            console.log('Received values of form: ', values);
                        }
                    });
                },
                handleConfirmBlur(e) {
                    const value = e.target.value;
                    this.confirmDirty = this.confirmDirty || !!value;
                },
                compareToFirstPassword(rule, value, callback) {
                    const form = this.form;
                    if (value && value !== form.getFieldValue('password')) {
                        callback('Two passwords that you enter is inconsistent!');
                    } else {
                        callback();
                    }
                },
                validateCode(rule, value, callback) {
                    const identifyCode = this.identifyCode
                    if (identifyCode !== value) {
                        callback('请输入正确的验证码');
                    } else {
                        callback();
                    }
                },
                validateToNextPassword(rule, value, callback) {
                    const form = this.form;
                    if (value && this.confirmDirty) {
                        form.validateFields(['confirm'], { force: true });
                    }
                    callback();
                },
    
            },
            created() {
                this.refreshCode()
            }
        }
    </script>
    
    <style>
    .register1{
        margin: 0 auto;
        padding-right: 20%;
    }
    </style>
    ```![](https://img-blog.csdnimg.cn/20201112103500887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM3Mjc4Mw==,size_16,color_FFFFFF,t_70#pic_center)
    
    本例用到的ant design 组件,若需复现记得在main.js里面注册相应组件。
    
    本文借鉴:https://www.jianshu.com/p/99c6e2f3e457
    
    展开全文
  • 主要为大家介绍了如何简单实现vue验证码60秒倒计时功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今天小编就为大家分享一篇vue 验证码界面实现点击后标灰并设置div按钮不可点击状态,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 验证码

    2021-01-28 08:59:00
    二、代码实现 新建test目录,放2个vue文件。 sidentify.vue组件代码: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></...

    一、概述

    效果图

    二、代码实现

    新建test目录,放2个vue文件。

    sidentify.vue组件代码:

    <template>
      <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: 25
          },
          fontSizeMax: {
            type: Number,
            default: 30
          },
          backgroundColorMin: {
            type: Number,
            default: 255
          },
          backgroundColorMax: {
            type: Number,
            default: 255
          },
          colorMin: {
            type: Number,
            default: 0
          },
          colorMax: {
            type: Number,
            default: 160
          },
          lineColorMin: {
            type: Number,
            default: 100
          },
          lineColorMax: {
            type: Number,
            default: 255
          },
          dotColorMin: {
            type: Number,
            default: 0
          },
          dotColorMax: {
            type: Number,
            default: 255
          },
          contentWidth: {
            type: Number,
            default: 112
          },
          contentHeight: {
            type: Number,
            default: 31
          }
        },
        methods: {
          // 生成一个随机数
          randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
          },
          // 生成一个随机的颜色
          randomColor(min, max) {
            let r = this.randomNum(min, max)
            let g = this.randomNum(min, max)
            let b = this.randomNum(min, max)
            return 'rgb(' + r + ',' + g + ',' + b + ')'
          },
          drawPic() {
            let canvas = document.getElementById('s-canvas')
            let 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'
            let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
            let 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 < 5; 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 < 80; 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: {
          identifyCode() {
            this.drawPic()
          }
        },
        mounted() {
          this.drawPic()
        }
      }
    </script>
    <style scoped>
      .s-canvas {
        height: 38px;
    
      }
      .s-canvas canvas{
        margin-top: 1px;
        margin-left: 8px;
      }
    </style>
    
    View Code

    说明

    test.vue

    <template>
      <div class="form-group" style="display: flex;">
        <div>
          <span>验证码:</span>
          <input type="text" id="code" v-model="code" class="code" placeholder="请输入验证码"/>
        </div>
        <div class="login-code" @click="refreshCode">
          <!--验证码组件-->
          <s-identify :identifyCode="identifyCode"></s-identify>
        </div>
        <div>
          <button @click="checkCaptcha">验证</button>
        </div>
      </div>
    
    </template>
    
    <script>
      import SIdentify from '../login/sidentify'
    
      export default {
        components: { SIdentify },
        data() {
          return {
            identifyCodes: '1234567890',
            identifyCode: '',
            code: '',//text框输入的验证码
            tableData: []
          }
        },
        mounted: function() {
          this.identifyCode = ''
          // 初始化验证码
          this.makeCode(this.identifyCodes, 4)
        },
        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 < l; i++) {
              this.identifyCode += this.identifyCodes[
                this.randomNum(0, this.identifyCodes.length)
                ]
            }
            console.log("验证码",this.identifyCode)
          },
          // 检查验证码是否正确
          checkCaptcha(){
            if (this.code == ""){
              alert("请输入验证码")
              return false
            }
            if (this.identifyCode != this.code){
              this.code = ''
              this.refreshCode()
              alert("请输入正确的验证码")
              return false
            }
            console.log("验证码正确")
          }
        }
      }
    </script>
    
    <style>
      /*验证码样式*/
      .code {
        width: 124px;
        height: 31px;
        border: 1px solid rgba(186, 186, 186, 1);
      }
    
      .login-code {
        cursor: pointer;
      }
    </style>
    
    View Code

    访问页面,输入正确的验证码,会有提示。

     注意:我在console中,输出了正确的验证码,照着填写即可。

     这个样式,可能不太美观。如果需要用到项目中,可以自行调整样式。

    本文参考链接:

    https://www.cnblogs.com/web-aqin/p/10796326.html

    展开全文
  • vue- 验证码实现

    2020-03-16 21:05:29
    注意的点: 后端返回的可能是二进制文件 解决方法 - 将请求地址直接写在src中 例子: template src的地址为后台地址,key为后台要求传递...简单粗暴的获取验证码 - 注意,这里的$refs是属于elementUI的哈 ...

    注意的点: 后端返回的可能是二进制文件

    解决方法 - 将请求地址直接写在src中

    例子:

       template 

           src的地址为后台地址,key为后台要求传递的值

       

     简单粗暴的获取验证码 

     

    展开全文
  • Vue实现验证码功能

    2020-10-15 22:20:54
    主要为大家详细介绍了Vue实现验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue 图形验证码实现 详解

    万次阅读 2019-07-15 13:26:02
    import Sidentify from '../components/common/Sidentify' //**引入验证码组件** export default { data: function(){ return { ruleForm: { username: '', password: '', sidentify: '', }, rules: { ...

    其实绘制图形二维码就是使用 进行图形绘制

    canvas 绘制图形

    1.获取元素dom 访问绘图上下文

    <canvas id="tutorial" width="150" height="150"></canvas>
    var canvas = document.getElementById('tutorial'); //获取dom
    var ctx = canvas.getContext('2d'); //访问绘图上下文

    2.第二步就是绘制相应内容了,下面是vue 绘制验证码图形

    如图:[在这里插入图片描述](https://img-blog.csdnimg.cn/2019071512072254.png在这里插入图片描述

    1.父组件login.vue
    <template>
        <div class="login-wrap">
            <div class="ms-login">
                <div class="ms-title">后台管理系统</div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="username">
                            <el-button slot="prepend" icon="el-icon-people"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                            <el-button slot="prepend" icon="el-icon-lock"></el-button>
                        </el-input>
                    </el-form-item>
    
                    <el-form-item prop="sidentify"> // 验证码
                        <el-col :span="14">
                        <el-input placeholder="sidentify" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                        </el-input>
                        </el-col>
                        <el-col :span="8">
                            <v-sidentify></v-sidentify>
                        </el-col>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </div>
                    <p class="login-tips">Tips : 用户名和密码随便填。</p>
                </el-form>
            </div>
        </div>
    </template>
    
    <script>
        import Sidentify from '../components/common/Sidentify'  //**引入验证码组件**
        export default {
            data: function(){
                return {
                    ruleForm: {
                        username: '',
                        password: '',
                        sidentify: '',
                    },
                    rules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' }
                        ],
                        sidentify:[
                            {required: true}
                        ]
                    }
                }
            },
            components: {
                'v-sidentify':Sidentify 
            },
          
        }
    </script>
    
    2. 创建验证码组件
    <template>
        <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: 'asdf'
                },
    
            },
            data(){
                return {
                    fontSizeMin: 160,
                    fontSizeMax: 40,
                    backgroundColorMin: 180,
                    backgroundColorMax:240,
                    colorMin: 50,
                    colorMax: 160,
                    lineColorMin:40,
                    lineColorMax: 180,
                    dotColorMin: 0,
                    dotColorMax: 255,
                    contentWidth: 112,
                    contentHeight: 38
                }
            },
            methods: {
                // 生成一个随机数
                randomNum(min, max) {
                    return Math.floor(Math.random() * (max - min) + min)
                },
                // 生成一个随机的颜色
                randomColor(min, max) {
                    let r = this.randomNum(min, max)
                    let g = this.randomNum(min, max)
                    let b = this.randomNum(min, max)
                    return 'rgb(' + r + ',' + g + ',' + b + ')'
                },
                drawPic() {
                    let canvas = document.getElementById('s-canvas')
                    let ctx = canvas.getContext('2d')
                    // ctx.textBaseline = 'bottom'
                    // 绘制背景
                    ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax) //图形填充颜色设置
                    ctx.strokeStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax) //图形轮廓的颜色设置
                    ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) //绘制一个填充的矩形 0 0 width height x起点 y起点  宽 高
                    ctx.strokeRect(0,0,this.contentWidth, this.contentHeight) // 绘制一个矩形边框 0 0 width height x起点 y起点  宽 高
                    // ctx.clearRect(50,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' //字体大小
                    ctx.textBaseline = 'alphabetic' //基线对齐
                    let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
                    let 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)) //设置起点x,y
                        ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) //绘制直线 x,y 一条当前位置到x,y点的直线
                        ctx.stroke() // 通过线条绘制图形轮廓
                        // ctx.closePath() //结束闭合路径
                    }
                },
                drawDot(ctx) {
                    // 绘制干扰点
                    for (let i = 0; i < 100; i++) {
                        ctx.fillStyle = this.randomColor(0, 255)
                        ctx.beginPath()
                        // 绘制圆弧或圆,x,y,radius,startAngle,endAngle,anticlockwise // x,y 圆心点,radius 半径,从startAngle开始到endAngle结束
                        ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
                        ctx.fill() //通过填充路径的内容区域生成实心的图形。
                    }
                }
            },
            watch: {
                identifyCode() {
                    this.drawPic()
                }
            },
            mounted() {
                this.drawPic()
            }
        }
    </script>
    
    
    展开全文
  • Springboot Vue验证码校验

    千次阅读 2020-05-01 17:34:02
    项目中在登录注册环节肯定会用到验证码校验,Springboot整合Thymeleaf验证码校验之前已经做过了,那么现在Springboot和Vue前后端分离项目中该如何使用呢。 实现思路: 后端利用工具类生成验证码code,将验证码code...
  • vue验证码倒计时

    2021-03-12 14:14:02
    vue实现验证码倒计时 发送获取验证码请求成功以后利用setInterval每秒在原有时间上减1实现。 <span class="yzm" @click="codes" v-if="!btnBool" >{{yzmtext}}</span> <span class="yzm" v-if=...
  • 我的验证码机制实现逻辑: 用户请求登陆或其他操作,向后端发送uuid 后端生成验证码的图片以及正确的编码,并用redis存储 把图片通过二进制流的方式发送到前端 前端接受到二进制流后通过img标签展示 用户填写的...
  • vue实现验证码

    千次阅读 2020-08-22 11:03:49
    二,实现代码 <template> <div> <Vcode :show="isShow" @success="success" @close="close" /> <el-button @click="submit">登录</el-button> </div> </template> ...
  • Get Captcha{{ count }} simport store from '@/store'import Vue from 'vue'import $ from 'jquery'export default {name: "register",data () {return {show: true,count: 60,timer: null,}},methods: {get_captch...
  • Vue实现图形验证码展示 register.js mounted(){ // 生成图形验证码 this.generate_image_code(); }, methods: { // 生成图形验证码 generate_image_code(){ // 生成UUID。generateUUID() : 封装在common.js文件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 748
精华内容 299
关键字:

vue验证码实现

vue 订阅