更新记录

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

修复微信小程序报错问题

1.0.0（2023-08-21） 下载此版本

上线

平台兼容性

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

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

安装方式

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

有项目需要开发的请联系 QQ: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 = '重新获取了'  
      }
  }
};
</script>
<style scoped lang="scss">
    .content {
        padding: 0 20px;
        .hader {
            line-height: 80rpx;
            font-weight: 800;
        }
    }
</style>

方法介绍

参数

方法

事件