更新记录

1.0.0（2024-08-04） 下载此版本

1.0.0版本目前只兼容微信小程序，其它平台暂不兼容

平台兼容性

lin-captcha

使用说明

将插件导入到Hubilder之后,直接通过 lin-captcha 标签使用

    <view class="content">
         // 开始使用lin-captcha 
        <lin-captcha :width="100" :height="35" ref="lCaptcha" ></lin-captcha>
        <view>
            请输入验证码：<input style="border: 1px solid #cfcfcf;" type="text" v-model="mycode" />
        </view>
        <button @click="onsubmit">确定</button>
    </view>

       <!------------------ vue2使用方法 -------------------->
<script>
    export default {
        data() {
            return {
                mycode: ''
            }
        },
        methods: {
            onsubmit() {
                if(this.mycode === this.$refs['lCaptcha'].verifyCode) { // 与验证码比对
                    console.log('验证通过')

                } else {
                    console.log('不通过')
                    this.$refs['lCaptcha'].updateImageCode() // 刷新验证码
                }
            }

        }
    }
</script>

 <!------------------ vue3使用方法 -------------------->
 <script setup>
    import ReCaptcha from "@/components/reCaptcha"
    const rCaptcha = ref(null)
    const mycode = ref('')
    function onsubmit() {
        if(mycode.value === rCaptcha.value.verifyCode) {
            console.log('验证通过')
        }else {
            console.log('不通过')
            rCaptcha.value.updateImageCode() // 刷新验证码
        }
    }

</script>

Props

组件暴露的属性方法

联系作者

如使用上有问题可以留言或者联系我哈，我会一直更新的；