FxInputOtp 一次性密码输入框

用于输入一次性密码（OTP，如短信验证码）。不依赖任何 UI 框架，支持自定义长度、密码遮罩、分隔符、自定义校验，以及 outlined / filled / underlined 三种类型。

基础用法

<template>
  <div>
    <FxInputOtp v-model="otp" />
    <div style="margin-top: 20px">值：{{ otp }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const otp = ref("123")
</script>

自定义长度

通过 length 属性自定义输入字段数量。

<template>
  <div class="demo-input-otp">
    <FxInputOtp v-model="otp1" :length="4" />
    <FxInputOtp v-model="otp2" :length="8" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const otp1 = ref("")
const otp2 = ref("")
</script>

<style scoped>
.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

类型

提供三种类型：outlined（默认）、filled、underlined。

<template>
  <div class="demo-input-otp">
    <div>
      <p>描边（默认）</p>
      <FxInputOtp v-model="otp1" type="outlined" />
    </div>
    <div>
      <p>填充</p>
      <FxInputOtp v-model="otp2" type="filled" />
    </div>
    <div>
      <p>下划线</p>
      <FxInputOtp v-model="otp3" type="underlined" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const otp1 = ref("")
const otp2 = ref("")
const otp3 = ref("")
</script>

<style scoped>
.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

p {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

尺寸

提供三种尺寸：large、default、small。

<template>
  <div class="demo-input-otp">
    <div>
      <p>大</p>
      <FxInputOtp v-model="otp1" size="large" />
    </div>
    <div>
      <p>默认</p>
      <FxInputOtp v-model="otp2" size="default" />
    </div>
    <div>
      <p>小</p>
      <FxInputOtp v-model="otp3" size="small" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const otp1 = ref("")
const otp2 = ref("")
const otp3 = ref("")
</script>

<style scoped>
.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

p {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

禁用与只读

支持禁用与只读状态。

<template>
  <div class="demo-input-otp">
    <div class="type-wrap">
      <p>禁用</p>
      <FxInputOtp v-model="otp1" disabled />
      <FxInputOtp v-model="otp1" disabled type="filled" />
      <FxInputOtp v-model="otp1" disabled type="underlined" />
    </div>
    <div class="type-wrap">
      <p>只读</p>
      <FxInputOtp v-model="otp2" readonly />
      <FxInputOtp v-model="otp2" readonly type="filled" />
      <FxInputOtp v-model="otp2" readonly type="underlined" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const otp1 = ref("123")
const otp2 = ref("456")
</script>

<style scoped>
.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.type-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

p {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

密码模式

通过 mask 属性隐藏输入字符。

<template>
  <div>
    <FxInputOtp v-model="otp" mask />
    <div style="margin-top: 20px">值：{{ otp }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const otp = ref("123")
</script>

分隔符

自定义字段间的分隔符，支持字符串、VNode 或按索引返回的函数，也可用 separator 插槽自定义。

<template>
  <div class="demo-input-otp">
    <FxInputOtp separator="/" />
    <FxInputOtp :separator="castSeparator" />
    <FxInputOtp>
      <template #separator>•</template>
    </FxInputOtp>
  </div>
</template>

<script setup lang="ts">
import { h } from "vue"

const castSeparator = (index: number) => {
  return index & 1 ? h("span", null, "—") : ""
}
</script>

<style scoped>
.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

自定义校验

通过 validator 属性校验输入字符，配合 inputmode 指定虚拟键盘类型。

<template>
  <div class="demo-input-otp">
    <div>
      <p>仅数字</p>
      <FxInputOtp
        v-model="otp1"
        :validator="onlyAllowNumber"
        inputmode="numeric"
      />
    </div>
    <div>
      <p>仅字母</p>
      <FxInputOtp v-model="otp2" :validator="onlyAllowLetter" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const otp1 = ref("")
const otp2 = ref("")

const onlyAllowNumber = (value: string) => /^\d$/.test(value)
const onlyAllowLetter = (value: string) => /^[a-zA-Z]$/.test(value)
</script>

<style scoped>
.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

p {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

API

Attributes

属性	说明	类型	默认值
model-value (v-model)	绑定值。由于数字不能有前导零，modelValue 仅在初始化时允许为 number	string / number	—
length	输入字段数量	number	6
validator	自定义校验函数	(char: string, index: number) => boolean	() => true
inputmode	原生 inputmode（用于调起对应虚拟键盘）	string	—
type	输入框类型	'outlined' | 'filled' | 'underlined'	outlined
size	尺寸	'large' | 'default' | 'small'	—
mask	是否开启密码模式（隐藏字符）	boolean	—
disabled	是否禁用	boolean	—
separator	字段间的分隔符	string / VNode / (index: number) => string | VNode	—
validate-event	是否在 blur / 值变化时触发表单项校验	boolean	true
readonly	同原生 input 的 readonly	boolean	false
id	原生 id	string	—
aria-label	原生 aria-label	string	—

Events

事件名	说明	类型
update:model-value	值更新时触发	(value: string) => void
change	失焦且值变化时触发	(value: string) => void
finish	所有字段填满时触发	(value: string) => void
focus	聚焦时触发	(event: FocusEvent) => void
blur	失焦时触发	(event: FocusEvent) => void

Slots

插槽名	说明	类型
separator	字段间的分隔符内容	{ index: number }

Exposes

名称	说明	类型
inputRefs	HTML input 元素数组	Ref<(HTMLInputElement | undefined)[]>
focus	聚焦指定输入框	(index?: number) => void
blur	失焦当前聚焦的输入框	() => void