Silver Formily Vant1.0.1

Appearance

Mobile Preview Open
Open mobile preview

PasswordInput ​

PasswordInput 是对 Vant 密码输入框的 Formily 适配，负责把字段值映射到组件展示，并补上内置数字键盘的接入能力。

使用边界

当传入 keyboard 后，组件会内置 NumberKeyboard，并在内部管理展开、收起和字段值写回；当显式传入 keyboard: false 时，仅表示关闭内置键盘，后续输入流程需要业务自行接管。

基础使用 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { PasswordInput } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    paymentPassword: '',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="paymentPassword"
        :component="[
          PasswordInput,
          {
            keyboard: {
              title: '请输入支付密码',
            },
            length: 6,
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

禁用内置键盘 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { PasswordInput } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'
import { ref } from 'vue'

const form = createForm({
  values: {
    password: '12',
  },
})

const focusCount = ref(0)

function handleFocus() {
  focusCount.value += 1
}
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel demo-panel--disable-keyboard">
      <Field
        name="password"
        :component="[
          PasswordInput,
          {
            keyboard: false,
            length: 6,
            onFocus: handleFocus,
          },
        ]"
      />

      <div class="demo-tip">
        已触发 focus：{{ focusCount }} 次，可由业务自行决定后续如何输入
      </div>
    </div>
  </FormProvider>
</template>

<style scoped>
.demo-panel--disable-keyboard {
  gap: 12px;
}

.demo-tip {
  color: var(--van-text-color-2);
  font-size: 14px;
  line-height: 20px;
}
</style>

自定义长度 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { PasswordInput } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    captcha: '',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="captcha"
        :component="[
          PasswordInput,
          {
            keyboard: {
              title: '请输入验证码',
            },
            length: 4,
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

明文展示 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { PasswordInput } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    otp: '',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="otp"
        :component="[
          PasswordInput,
          {
            gutter: 8,
            keyboard: {
              title: '请输入短信验证码',
            },
            length: 4,
            mask: false,
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

API ​

扩展属性 ​

属性名类型描述默认值
modelValuestring | number | nullFormily 字段值-
disabledboolean是否禁用；禁用后不再透出 focusfalse
keyboardboolean | PasswordInputKeyboardProps是否启用内置数字键盘，或传入键盘配置对象false

属性 ​

除了上述扩展属性之外，组件会透传所有Vant组件的属性及事件，详情可参考 Vant PasswordInput 官方文档。

PasswordInputKeyboardProps ​

可参考Vant NumberKeyboard 官方文档