跳到主要内容

InputCode 验证码密码输入

通常需要配合 NumberKeyboard 组件来实现验证码的输入功能

示例​

import { Header, ScrollView, TopView, GroupList, InputCode, NumberKeyboard } from '@/duxuiExample'

export default function InputCodeExample() {

  const [value, props] = NumberKeyboard.useController()

  return <TopView>
    <Header title='InputCode' />
    <ScrollView>
      <GroupList>
        <GroupList.Item title='默认'>
          <InputCode value='11' />
        </GroupList.Item>
        <GroupList.Item title='焦点'>
          <InputCode value='11' focus />
        </GroupList.Item>
        <GroupList.Item title='输入密码'>
          <InputCode value='11' password />
        </GroupList.Item>
        <GroupList.Item title='4位验证码'>
          <InputCode value='11' length={4} />
        </GroupList.Item>
        <GroupList.Item title='配合数字键盘使用'>
          <InputCode value={value} focus />
          <NumberKeyboard {...props} />
        </GroupList.Item>
      </GroupList>
    </ScrollView>
  </TopView>
}

Props​

继承自RowProps

value​

值

类型必填默认值
string否

onChange​

值改变回调 此功能待实现

类型必填默认值
(value: string) => void否

length​

输入长度

类型必填默认值
number否6

password​

是否隐藏输入内容

类型必填默认值
boolean否false

focus​

是否显示焦点

类型必填默认值
boolean否false

itemStyle​

每个输入框的样式

类型必填默认值
CSSProperties否