{ "slug": "codeinput", "mode": "single", "curated": true, "examples": [ { "id": "codeinput-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
\n

CodeInput 验证码输入

\n

用于短信验证码、一次性口令(OTP)输入,支持自动跳转、退格回退与粘贴填充。

\n
\n
基础用法(6 位)
\n
\n
\n
\n
\n
掩码模式 + 4 位
\n
\n
\n
\n
", "preview": { "show": [ [ 0 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "

CodeInput 验证码输入

\n

用于短信验证码、一次性口令(OTP)输入,支持自动跳转、退格回退与粘贴填充。

\n
基础用法(6 位)
\n
\n
\n
掩码模式 + 4 位
\n
\n
", "jsx": "import { useState } from 'react';\nimport { KoleCodeInput } from 'kole-ui/react';\n\nexport default function Demo() {\n const [code, setCode] = useState('');\n const [pin, setPin] = useState('');\n const tip6 = code.length === 6 ? '已输入完成:' + code : '';\n const tip4 = pin.length === 4 ? '已输入完成:' + pin : '';\n return (\n <>\n \n \n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleCodeInput } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [code, setCode] = useState('');\n const [pin, setPin] = useState('');\n const tip6 = code.length === 6 ? '已输入完成:' + code : '';\n const tip4 = pin.length === 4 ? '已输入完成:' + pin : '';\n return (\n <>\n \n \n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/CodeInput.html:17 data-length=6 与 :23 data-length=4 data-masked=1 两个实例,以及 :99「已输入完成:」提示文案;prop 名取自 frameworks/CodeInput.jsx:10-17(value/length/masked/tip)" ] } ] }