更新记录

1.0.2（2024-03-26）

maxlength 值由 String | Number 改为 只能为 Number

1.0.1（2024-02-23）

完善文档

1.0.0（2024-02-23）

组件一般用于验证用户短信验证码的场景

平台兼容性

wly-pwd-input

平台差异说明

• 通过mode参数模式，可取如下值：
• box(默认)-输入位置位一个方框
• bottomLine-底部显示一条横线
• middleLine-中部显示一条横线

<wly-pwd-input mode="bottomLine"></wly-pwd-input>

• 通过maxlength参数配置可输入的方框个数，如5位验证码，该值设置为5即可
• 如果需要显示默认值，请通过value参数配置

<wly-pwd-input :maxlength="5" value="46821"></wly-pwd-input>

如果需要一打开页面，就自动弹出键盘获取焦点，请配置focus值为true，否则需要用户手动点击输入区域才能唤起键盘

<wly-pwd-input :focus="true"></wly-pwd-input>

配置breathe为true，当前激活输入框的样式会有一个类似光标一闪一闪的由浅到深的效果

<wly-pwd-input :breathe="true"></wly-pwd-input>

dot-fill参数配置后，输入内容将不可见，用点替代，事件回调中会返回真实值

<wly-pwd-input :dot-fill="true"></wly-pwd-input>

如果您想结合键盘组件进行自定义的输入效果，就需要设置disabled-keyboard为true，来保证点击 输入框时不会触发系统自带的键盘，否则会造成冲突。

• 每当输入内容发生改变，会回调一个change事件，内容为当前输入的字符串，如"395"
• 当输入的内容长度(字符个数)达到maxlength值后，会触发finish事件，同时也会触发change事件

<template>
    <view>
        <wly-pwd-input @change="change" @finish="finish"></wly-pwd-input>
    </view>
</template>

<script>
    export default {
        methods: {
            change(e) {
                console.log('内容改变，当前值为：' + e);
            },
            finish(e) {
                console.log('输入结束，当前值为：' + e);
            },
        }
    }
</script>