Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

PasscodeInput ​

字段值为字符串，支持 length、plain、keyboard 等原生属性。禁用、只读和阅读态使用静态文本，默认显示掩码；仅 plain 为 true 时显示原文。

基础使用 ​

tsx
import { FormButtonGroup, FormItem, PasscodeInput, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { useState } from 'react'

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function PasscodeInputBasic() {
  const [form] = useState(() => createForm({ initialValues: { password: '' } }))
  return (
    <FormProvider form={form}>
      <Field
        name="password"
        title="支付密码"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[PasscodeInput, { length: 6 }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

明文验证码 ​

通过 plain 和 seperated 展示四位明文验证码。示例仅用于演示，请勿输入真实密码。

tsx
import { FormButtonGroup, FormItem, PasscodeInput, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { useState } from 'react'

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function PasscodeInputAppearance() {
  const [form] = useState(() => createForm({ initialValues: { code: '' } }))
  return (
    <FormProvider form={form}>
      <Field
        name="code"
        title="验证码"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[PasscodeInput, { length: 4, plain: true, seperated: true }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

字段状态 ​

对比 disabled、readOnly 和 readPretty 状态。

tsx
import { FormItem, PasscodeInput } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { useState } from 'react'

export default function PasscodeInputStatus() {
  const [form] = useState(() => createForm({ initialValues: { disabled: '123456', readOnly: '123456', readPretty: '123456' } }))
  return (
    <FormProvider form={form}>
      <Field name="disabled" title="禁用" disabled decorator={[FormItem, { layout: 'vertical' }]} component={[PasscodeInput, { length: 6 }]} />
      <Field name="readOnly" title="只读" readOnly decorator={[FormItem, { layout: 'vertical' }]} component={[PasscodeInput, { length: 6 }]} />
      <Field name="readPretty" title="阅读态" readPretty decorator={[FormItem, { layout: 'vertical' }]} component={[PasscodeInput, { length: 6 }]} />
    </FormProvider>
  )
}

API ​

公开属性类型为 IPasscodeInputProps。支持 Formily 字段的 disabled、readOnly 和 readPretty 状态。

其余属性参考 antd-mobile PasscodeInput 官方文档。