更新记录

1.0.3(2024-10-11) 下载此版本

修复 注释多于代码报错问题

1.0.2(2024-03-26) 下载此版本

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

1.0.1(2024-02-23) 下载此版本

完善文档

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

wly-pwd-input

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
  • 通过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>

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

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

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

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

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

  • 每当输入内容发生改变,会回调一个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>
参数 说明 类型 默认值 可选值
maxlength 输入字符个数 Number 4 -
dot-fill 是否用圆点填充 Boolean false true
mode 模式选择,见上方"基本使用"说明 String box bottomLine / middleLine
value 预置值 String | Number - -
breathe 是否开启呼吸效果,见上方说明 Boolean true false
focus 是否自动获取焦点 Boolean false true
bold 字体和输入横线是否加粗 Boolean true false
font-size 字体大小,单位rpx String | Number 60 -
active-color 当前激活输入框的样式 String #2979ff -
inactive-color 非激活输入框的样式,文字颜色同此值 String #606266 -
width 输入框的宽度(高等于宽),单位rpx String | Number 80 -
disabled-keyboard 禁止点击输入框唤起系统键盘 Boolean false true
事件名 说明 回调参数 版本
change 输入内容发生改变时触发,具体见上方说明 value:当前输入的值 -
finish 输入字符个数达maxlength值时触发,见上方说明 value:当前输入的值 -

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问