更新记录
0.0.1(2025-04-10)
下载此版本
0.0.1
- 整理更新
- 参考https://ext.dcloud.net.cn/plugin?id=17177并拓展
平台兼容性
uni-app(4.22)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
- |
- |
× |
× |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| × |
× |
× |
× |
× |
× |
× |
× |
× |
× |
× |
uni-app x(4.13)
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
| - |
- |
- |
- |
- |
- |
pan-code 组件文档
属性(Props)
| 属性名 |
类型 |
默认值 |
说明 |
| focus |
Boolean |
true |
是否自动聚焦。 |
| hide |
String |
'' |
隐藏字符(密码效果)。 |
| maxlength |
Number |
6 |
验证码长度。 |
| type |
String |
'block' |
样式类型,可选值:block(方框)、dashed(虚线方框)、line(线)。 |
| inputType |
String |
'number' |
输入类型,可选值:text、number。 |
| isCursor |
Boolean |
true |
是否显示光标。 |
| isFlicker |
Boolean |
false |
边框是否闪烁。 |
| activeBorderColor |
String |
'#2100f8' |
选中时的边框颜色。 |
| borderColor |
String |
'#b8b8b8' |
未选中时的边框颜色。 |
| borderRadius |
[String, Number] |
10 |
圆角大小。 |
| itemBackgroundColor |
String |
'rgba(0, 0, 0, 0)' |
单个框的背景颜色。 |
| itemSize |
[String, Number] |
80 |
单个框的大小。 |
| fontSize |
[String, Number] |
30 |
字体大小。 |
| fontColor |
String |
'#000000' |
字体颜色。 |
事件(Events)
| 事件名 |
参数 |
说明 |
| onChange |
value |
输入内容发生变化时触发,返回当前输入值。 |
| onComplete |
value |
输入完成(达到 maxlength)时触发,返回最终输入值。 |
插槽(Slots)
方法(Methods)
| 方法名 |
参数 |
返回值 |
说明 |
| clear |
无 |
无 |
清空输入框内容。 |
| setValue |
需要设置的值 |
无 |
自动设置值。 |
示例用法
<template>
<pan-code
@onChange="handleInputChange"
@onComplete="handleInputComplete"
/>
</template>
<script>
export default {
methods: {
handleInputChange(value) {
console.log('Input changed:', value);
},
handleInputComplete(value) {
console.log('Input completed:', value);
}
}
}
</script>
- *本组件参考https://ext.dcloud.net.cn/plugin?id=17177并拓展