更新记录

1.0.1（2025-05-21） 下载此版本

增加v-model支持

1.0.0（2025-05-21） 下载此版本

上传

平台兼容性

欢迎使用 qiao-verification組件

**qiao-verification組件，是验证码组件。 用于登录验证，获取其他需要验证的地方，可以起前端自动生成验证码，或通过接口调用验证码，自定义验证框颜色。用法简单 本组件是在原作者基础上修改的，增加了v-model双向绑定的支持，感谢原作者！

使用方法

layout基础用法。

<template>
  <view class="content">
    <view class="hader">基础用法</view>
    <qiao-verification v-model="code"></qiao-verification>
    <view class="hader">通过接口获取验证码</view>
    <qiao-verification v-model="code" @getCode="getCode" :securityCode="securityCode"></qiao-verification>
    <view class="hader"> 自定义验证码数量 - 自定义颜色</view>
    <qiao-verification v-model="code" backgroundColor="#a7c3ff"  :colorList="colorList" :lineColorList="lineColorList"  :codeLength="6" ></qiao-verification> 
    <view class="hader"> 验证码大小 - 干扰线数量</view>
    <qiao-verification v-model="code" :contentHeight="100" :contentWidth="200" :lineLength="60"></qiao-verification>
  </view>
</template>
<script>
export default {
  data() {
    return {
        code:'',
        val:'',
        securityCode:'我是获取的',
        lineColorList: ['rgba(0, 85, 255, 0.5)','rgba(85, 255, 0, 0.5)','rgba(255, 255, 0, 0.5)'],
        colorList:['rgb(255, 0, 0)','rgb(255, 0, 127)','rgb(255, 0, 255)']
    };
  },
  methods:{
      getCode(){
        this.securityCode = '重新获取了'  
      },
      verification(){
        this.$refs.literalness.verification('123456')  //验证123456是否通过验证
      }
  }
};
</script>
<style scoped lang="scss">
    .content {
        padding: 0 20px;
        .hader {
            line-height: 80rpx;
            font-weight: 800;
        }
    }
</style>

方法介绍

参数

方法

verification使用介绍

vue 2

<template>
  <view class="content">
    <qiao-verification v-model="code" ref="literalness" @getCode="getCode" :securityCode="securityCode"></qiao-verification>
    <view @click="verification">verification 验证123456是否通过检验</view>
  </view>
</template>
export default {
  data() {
    return {
        code:'',
        val:'',
        securityCode:'我是获取的',
    };
  },
  methods:{
      getCode(){
            this.securityCode = '重新获取了'  
      },
      verification(){
            this.$refs.literalness.verification('123456')  //验证123456是否通过验证
      }
  }
};
</script>

vue3

<template>
  <qiao-verification v-model="code" ref="literalness" @getCode="getCode" :securityCode="securityCode"></qiao-verification>
  <view @click="verification">verification 验证123456是否通过检验</view>
</template>
<script setup>
import { ref } from 'vue';
const  literalness = ref(null)
const  code = ref('')
const securityCode = ref('我是获取的')
function getCode(){
    securityCode.value = '重新获取了'  
}
function verification(){
    literalness.value.verification('我是获取的')
}
</script>

事件