更新记录
0.0.1(2025-04-10)
下载此版本
0.0.1
- 整理更新
- 参考https://ext.dcloud.net.cn/plugin?id=17177并拓展
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.04 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
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并拓展