更新记录
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>
配置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>
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
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:当前输入的值 | - |