更新记录

1.3.0（2025-04-18） 下载此版本

新增 - 大小写检验 ， 获取验证码方法

1.2.0（2025-04-18） 下载此版本

修复微信小程序真机无法显示的问题，及修改文档使用实例

1.1.0（2023-12-11） 下载此版本

修复微信小程序报错问题

平台兼容性

欢迎使用 layout jp-verification-literalness組件

**jp-verification-literalness組件，是验证码组件。 用于登录验证，获取其他需要验证的地方，可以起前端自动生成验证码，或通过接口调用验证码，自定义验证框颜色。用法简单

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

有项目需要开发的请联系 Q:371524845

开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新

项目实例请查看 @/jp-layout/pages/index/index.vue

使用方法

layout基础用法。

<template>
  <view class="content">
    <view class="hader">基础用法</view>
    <jp-verification-literalness></jp-verification-literalness>
    <view class="hader">通过接口获取验证码</view>
    <jp-verification-literalness @getCode="getCode" :securityCode="securityCode"></jp-verification-literalness>
    <view class="hader"> 自定义验证码数量 - 自定义颜色</view>
    <jp-verification-literalness backgroundColor="#a7c3ff"  :colorList="colorList" :lineColorList="lineColorList"  :codeLength="6" ></jp-verification-literalness> 
    <view class="hader"> 验证码大小 - 干扰线数量</view>
    <jp-verification-literalness :contentHeight="100" :contentWidth="200" :lineLength="60"></jp-verification-literalness>
  </view>
</template>
<script>
export default {
  data() {
    return {
        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">
    <jp-verification-literalness ref="literalness" @getCode="getCode" :securityCode="securityCode"></jp-verification-literalness>
    <view @click="verification">verification 验证123456是否通过检验</view>
  </view>
</template>
export default {
  data() {
    return {
        val:'',
        securityCode:'我是获取的',
    };
  },
  methods:{
      getCode(){
            this.securityCode = '重新获取了'  
      },
      verification(){
            this.$refs.literalness.verification('123456')  //验证123456是否通过验证
      }
  }
};
</script>

vue3

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

事件