更新记录
1.0.0(2022-05-30)
下载此版本
1.增加6位密码输入框
2.增加4位验证码输入框
3.支持设置边框颜色
4.支持修改文字颜色
5.支持修改字体大小
6.支持设置输入框宽度
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.2.0 app-vue app-nvue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
× |
× |
√ |
× |
√ |
√ |
√ |
本组件使用vue3+ts开发,vue3中可以使用,vue2不可以使用
基础用法
参数说明 |
Props |
类型 |
是否必填 |
默认值 |
说明 |
width |
string 或 number |
否 |
484 |
输入框的总宽度 |
borderColor |
string 或‘none’ |
否 |
‘#4db686’ |
边框颜色 |
fontSize |
string 或 number |
否 |
‘30’ |
字体大小 |
borderRadius |
string 或 number |
否 |
0 |
输入框整体圆角弧度 |
color |
string |
否 |
#000 |
字体颜色 |
numbers |
4或6 |
否 |
6 |
4是验证码框,6是密码框 |
@finalValue |
自定义事件 |
是 |
|
输入框填满时,触发事件,值是当前输入框内的值 |
支付密码框效果 6位数验密码 4位验证码效果
示例代码
<template>
<xt-password-box @finalValue="getValue">
</template>
<script lang="ts" setup>
const getValue = (value: string) => {
console.log(value)
}
</script>