更新记录

0.0.1(2025-04-10) 下载此版本

0.0.1

  • 整理更新
  • 参考https://ext.dcloud.net.cn/plugin?id=17177并拓展

平台兼容性

Vue2 Vue3
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' 输入类型,可选值:textnumber
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并拓展

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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