更新记录

1.0.3（2023-06-27）

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

1.0.1（2023-06-27）

可以自由配置输入框的数量，间隔距离，输入框高度，宽度按父组件宽度自动匹配计算。

平台兼容性

使用方法

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

<wolf-phone-input
    :inputType="2"
    :inputCount="6"
    :rowSpaceWidth="4"
    :inputHeight="40"
    :inputCircleWidth="1"
    :inputCircleRadius="6"
    :numFontSize="22"
    :inputCircleDefaultCol="'#999999'"
    :inputCircleSelectedCol="'#2E9DFF'"
    :inputContentCol="'#333333'"
/>

参数

说明

使用时，需在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="2"
    :inputCount="6"
    :rowSpaceWidth="4"
    :inputHeight="40"
    :inputCircleWidth="1"
    :inputCircleRadius="6"
    :numFontSize="22"
    :inputCircleDefaultCol="'#999999'"
    :inputCircleSelectedCol="'#2E9DFF'"
    :inputContentCol="'#333333'"
    />
</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;
}

可以出现例图的效果。