基于vue项目 验证码生成组件

1、安装验证码组件

npm install captcha-mini

2、项目引入

 import CaptchaMini from 'captcha-mini'; //引入验证码生成组件​

        注：在使用页面引入

3、定义验证码容器

<template>
    ​<div>
        <canvas id="captcha" class="captcha"></canvas>
    </div>
</template>

<style>
    .captcha {
        width: 350px;
        height: 200px;
    }
</style>

4、绘制验证码

​
<script>
    import CaptchaMini from 'captcha-mini'; //引入验证码生成组件

    export default {
        methods:{
            //生成验证码
            initCaptcha() {
                var captcha = new CaptchaMini({
                    lineWidth: 5, //线条宽度
                    lineNum: 6, //线条数量
                    dotR: 2, //点的半径
                    dotNum: 25, //点的数量
                    preGroundColor: [10, 80], //前景色区间
                    backGroundColor: [150