更新记录

1.0.5（2025-04-01） 下载此版本

强制刷新方法优化

1.0.4（2025-04-01） 下载此版本

1、修复了了0无法输入问题； 2、添加了输入内容加密功能；

1.0.3（2023-06-27） 下载此版本

添加了两种输入框的格式； 边框颜色、大小等做成可配置；

平台兼容性

使用方法

复制代码import WolfPhoneInput from '@/components/wolf-phone-input/wolf-phone-input.vue';
components:{
    WolfPhoneInput
},

复制代码<wolf-phone-input
    :inputType="1"
    :inputCount="6"
    :rowSpaceWidth="8"
    :inputHeight="70"
    :inputCircleWidth="2"
    :inputCircleRadius="10"
    :numFontSize="44"
    :inputCircleDefaultCol="'#999999'"
    :inputCircleSelectedCol="'#2E9DFF'"
    :inputContentCol="'#333333'"
    @completeInput="completeInput"
    :isEncryption="true"
    :encryptionType="1"
/>

参数

说明

使用时，需在wolf-phone-input组件外层套一层view，会按照view的宽度自动适配输入框的宽度。 父页面创建方法completeInput，用于接收输入完成时，触发传递输入内容。

复制代码/*输入完成，或者点完成按钮时触发，传递输入的值*/
completeInput(code){

}

示例

复制代码<view class="dialog-v">
    <view style="margin-top: 20px; margin-bottom: 10px;">输入验证码</view>
    <wolf-phone-input
    :inputType="1"
    :inputCount="6"
    :rowSpaceWidth="8"
    :inputHeight="70"
    :inputCircleWidth="2"
    :inputCircleRadius="10"
    :numFontSize="44"
    :inputCircleDefaultCol="'#999999'"
    :inputCircleSelectedCol="'#2E9DFF'"
    :inputContentCol="'#333333'"
    @completeInput="completeInput"
    :isEncryption="true"
    :encryptionType="1"
    />
</view>

.dialog-v{
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    background-color: #dddddd;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    border-radius: 10px;
}

可以出现例图的效果。