使用场景与模型
一次性验证码使用独立多单元输入。v-model 的更新值始终为字符串，保留前导零；数字仅适合初始化。默认六位；文本密码使用 AsamPassword，普通单行输入使用 AsamInput。
输入、完成与组焦点
<template>
<!-- prettier-ignore -->
<div class="example">
<AsamInputOtp
v-model="code"
aria-label="短信验证码"
@finish="finished = $event"
@change="changed = $event"
@focus="focused = true"
@blur="focused = false"
/>
<output>模型：{{ code }}；完成：{{ finished }}；提交：{{ changed }}；组焦点：{{
focused
}}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputOtpBasicExample' });
import { ref } from 'vue';
import { AsamInputOtp } from '@asam-ui/ui';
const code = ref('');
const finished = ref('');
const changed = ref('');
const focused = ref(false);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style><template>
<!-- prettier-ignore -->
<div class="example">
<AsamInputOtp
v-model="code"
aria-label="短信验证码"
@finish="finished = $event"
@change="changed = $event"
@focus="focused = true"
@blur="focused = false"
/>
<output>模型：{{ code }}；完成：{{ finished }}；提交：{{ changed }}；组焦点：{{
focused
}}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputOtpBasicExample' });
import { ref } from 'vue';
import { AsamInputOtp } from '@asam-ui/ui';
const code = ref('');
const finished = ref('');
const changed = ref('');
const focused = ref(false);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>输入会移动到下一位，方向键移动焦点，Backspace 清空当前位并移到前一位，Delete 清空当前位。粘贴、浏览器自动填充的多字符输入均逐字符校验并按长度截断。finish 在一次编辑填满所有位时触发；change 在离开整个组且值变化时触发。组内部切换字段不重复触发 focus/blur。
长度与外部更新
length 改变实际字段数量；缩短长度会截断模型。外部更新模型同步各字段，不能用数字保存 0123 这类编码。
长度与外部模型
<template>
<!-- prettier-ignore -->
<div class="example">
<label>长度 <AsamInputNumber
v-model.number="length"
:min="2"
:max="8"
/> </label>
<AsamInputOtp v-model="code" :length="length" aria-label="可变长度验证码" />
<AsamButton native-type="submit" type="default" @click="code = '01234567'">外部填入含前导零的模型</AsamButton>
<output>{{ code }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputOtpLengthExample' });
import { ref } from 'vue';
import { AsamInputNumber, AsamButton, AsamInputOtp } from '@asam-ui/ui';
const code = ref('0123');
const length = ref(4);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style><template>
<!-- prettier-ignore -->
<div class="example">
<label>长度 <AsamInputNumber
v-model.number="length"
:min="2"
:max="8"
/> </label>
<AsamInputOtp v-model="code" :length="length" aria-label="可变长度验证码" />
<AsamButton native-type="submit" type="default" @click="code = '01234567'">外部填入含前导零的模型</AsamButton>
<output>{{ code }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputOtpLengthExample' });
import { ref } from 'vue';
import { AsamInputNumber, AsamButton, AsamInputOtp } from '@asam-ui/ui';
const code = ref('0123');
const length = ref(4);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>三种外观
type 选择 outlined、filled、underlined；它表示验证码字段外观。mask 控制字符隐藏。
三种外观
<template>
<div class="example">
<AsamInputOtp
v-for="type in types"
:key="type"
v-model="values[type]"
:type="type"
:length="4"
:aria-label="type"
/>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputOtpTypesExample' });
import { ref } from 'vue';
import { AsamInputOtp } from '@asam-ui/ui';
const types = ['outlined', 'filled', 'underlined'] as const;
const values = ref({ outlined: '1234', filled: '1234', underlined: '1234' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<AsamInputOtp
v-for="type in types"
:key="type"
v-model="values[type]"
:type="type"
:length="4"
:aria-label="type"
/>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputOtpTypesExample' });
import { ref } from 'vue';
import { AsamInputOtp } from '@asam-ui/ui';
const types = ['outlined', 'filled', 'underlined'];
const values = ref({ outlined: '1234', filled: '1234', underlined: '1234' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>四档密度与继承
large / big / default / small 对应 40 / 36 / 32 / 28px 控件高度。省略 size 按组、表单、provider、default 继承；显式值优先。big 的原生尺寸桥接为 default，实际 ASAM 密度仍为 big。
四档尺寸与继承
<template>
<!-- prettier-ignore -->
<div class="example">
<AsamConfigProvider :size="providerSize">
<label>继承密度
<AsamSelect v-model="providerSize">
<AsamOption v-for="size in sizes" :key="size" :label='size' :value='size'>{{ size }}</AsamOption>
</AsamSelect>
</label>
<AsamInputOtp v-model="code" :length="4" aria-label="继承密度" />
<div class="row">
<AsamInputOtp
v-for="size in sizes"
:key="size"
:size="size"
model-value="12"
:length="2"
:aria-label="size"
/>
</div>
</AsamConfigProvider>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputOtpSizesExample' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamInputOtp, AsamConfigProvider } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'] as const;
const providerSize = ref<'large' | 'big' | 'default' | 'small'>('big');
const code = ref('');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style><template>
<!-- prettier-ignore -->
<div class="example">
<AsamConfigProvider :size="providerSize">
<label>继承密度
<AsamSelect v-model="providerSize">
<AsamOption v-for="size in sizes" :key="size" :label='size' :value='size'>{{ size }}</AsamOption>
</AsamSelect>
</label>
<AsamInputOtp v-model="code" :length="4" aria-label="继承密度" />
<div class="row">
<AsamInputOtp
v-for="size in sizes"
:key="size"
:size="size"
model-value="12"
:length="2"
:aria-label="size"
/>
</div>
</AsamConfigProvider>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputOtpSizesExample' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamInputOtp, AsamConfigProvider } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
const providerSize = ref('big');
const code = ref('');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>禁用、只读与字符隐藏
disabled 禁止操作；省略时继承表单禁用。readonly 保留焦点和导航并禁止修改；mask 将字段显示为密码输入。
禁用、只读与 mask
<template>
<div class="example">
<div class="row">
<AsamCheckboxItem v-model="disabled">禁用</AsamCheckboxItem
><AsamCheckboxItem v-model="readonly">只读</AsamCheckboxItem
><AsamCheckboxItem v-model="mask">隐藏字符</AsamCheckboxItem>
</div>
<AsamInputOtp
v-model="code"
:disabled="disabled"
:readonly="readonly"
:mask="mask"
aria-label="状态验证码"
/><output>{{ code }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputOtpStatesExample' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamInputOtp } from '@asam-ui/ui';
const code = ref('012345');
const disabled = ref(false);
const readonly = ref(false);
const mask = ref(true);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<div class="row">
<AsamCheckboxItem v-model="disabled">禁用</AsamCheckboxItem
><AsamCheckboxItem v-model="readonly">只读</AsamCheckboxItem
><AsamCheckboxItem v-model="mask">隐藏字符</AsamCheckboxItem>
</div>
<AsamInputOtp
v-model="code"
:disabled="disabled"
:readonly="readonly"
:mask="mask"
aria-label="状态验证码"
/><output>{{ code }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputOtpStatesExample' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamInputOtp } from '@asam-ui/ui';
const code = ref('012345');
const disabled = ref(false);
const readonly = ref(false);
const mask = ref(true);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>分隔内容
separator 可以是文本、VNode，或接收前一字段索引的函数；separator 插槽接收 { index }。分隔仅出现在字段之间。
文本、VNode、函数与插槽分隔
<template>
<div class="example">
<AsamInputOtp model-value="123456" separator="-" aria-label="文本分隔" /><AsamInputOtp
model-value="123456"
:separator="vnode"
aria-label="VNode分隔"
/><AsamInputOtp
model-value="123456"
:separator="separator"
aria-label="函数分隔"
/><AsamInputOtp model-value="123456" aria-label="插槽分隔">
<template #separator="{ index }">
<span v-if="index === 2">/</span>
</template>
</AsamInputOtp>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputOtpSeparatorExample' });
import { h } from 'vue';
import { AsamInputOtp } from '@asam-ui/ui';
const vnode = h('span', { 'aria-hidden': 'true' }, '·');
const separator = (index: number) => (index === 2 ? h('span', {}, '—') : '');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<AsamInputOtp model-value="123456" separator="-" aria-label="文本分隔" /><AsamInputOtp
model-value="123456"
:separator="vnode"
aria-label="VNode分隔"
/><AsamInputOtp
model-value="123456"
:separator="separator"
aria-label="函数分隔"
/><AsamInputOtp model-value="123456" aria-label="插槽分隔">
<template #separator="{ index }">
<span v-if="index === 2">/</span>
</template>
</AsamInputOtp>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputOtpSeparatorExample' });
import { h } from 'vue';
import { AsamInputOtp } from '@asam-ui/ui';
const vnode = h('span', { 'aria-hidden': 'true' }, '·');
const separator = (index) => (index === 2 ? h('span', {}, '—') : '');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>字符校验与输入模式
validator 接收字符和目标索引；返回 false 时不接收该字符。粘贴会过滤不符合条件的字符。inputmode 选择虚拟键盘，实际校验仍由 validator 完成。
逐字符校验与粘贴
<template>
<div class="example">
<AsamInputOtp
v-model="code"
:validator="validator"
inputmode="numeric"
aria-label="仅数字验证码"
/>
<p class="example-paragraph">
尝试输入或粘贴 01a23456：非法字符忽略，超出长度的字符截断；可用方向键、退格和 Delete
编辑。
</p>
<output>字符串模型：{{ code }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputOtpValidationExample' });
import { ref } from 'vue';
import { AsamInputOtp } from '@asam-ui/ui';
const code = ref('');
const validator = (char: string, index: number) => /^\d$/.test(char) && index < 6;
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<AsamInputOtp
v-model="code"
:validator="validator"
inputmode="numeric"
aria-label="仅数字验证码"
/>
<p class="example-paragraph">
尝试输入或粘贴 01a23456：非法字符忽略，超出长度的字符截断；可用方向键、退格和 Delete
编辑。
</p>
<output>字符串模型：{{ code }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputOtpValidationExample' });
import { ref } from 'vue';
import { AsamInputOtp } from '@asam-ui/ui';
const code = ref('');
const validator = (char, index) => /^\d$/.test(char) && index < 6;
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>公开实例
inputRefs 是当前原生字段数组；focus(index) 将索引限制在有效字段范围，blur() 使当前字段失焦。业务代码通过公开类型访问实例。
公开焦点与原生字段
<template>
<!-- prettier-ignore -->
<div class="example">
<AsamInputOtp
ref="control"
v-model="code"
:length="4"
aria-label="实例验证码"
/>
<div class="row">
<AsamButton native-type="submit" type="default" @click="control?.focus(0)">聚焦首位</AsamButton>
<AsamButton native-type="submit" type="default" @click="control?.focus(3)">聚焦末位</AsamButton>
<AsamButton native-type="submit" type="default" @click="control?.blur()">失焦</AsamButton>
<AsamButton native-type="submit" type="default" @click="inspect">读取字段</AsamButton>
</div>
<output>{{ fields }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputOtpInstanceExample' });
import { ref } from 'vue';
import { AsamButton, AsamInputOtp } from '@asam-ui/ui';
import type { AsamInputOtpExpose } from '@asam-ui/ui';
const code = ref('');
const control = ref<AsamInputOtpExpose>();
const fields = ref('');
function inspect() {
fields.value = (control.value?.inputRefs ?? []).map((el) => el?.value ?? '').join('|');
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style><template>
<!-- prettier-ignore -->
<div class="example">
<AsamInputOtp
ref="control"
v-model="code"
:length="4"
aria-label="实例验证码"
/>
<div class="row">
<AsamButton native-type="submit" type="default" @click="control?.focus(0)">聚焦首位</AsamButton>
<AsamButton native-type="submit" type="default" @click="control?.focus(3)">聚焦末位</AsamButton>
<AsamButton native-type="submit" type="default" @click="control?.blur()">失焦</AsamButton>
<AsamButton native-type="submit" type="default" @click="inspect">读取字段</AsamButton>
</div>
<output>{{ fields }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputOtpInstanceExample' });
import { ref } from 'vue';
import { AsamButton, AsamInputOtp } from '@asam-ui/ui';
const code = ref('');
const control = ref();
const fields = ref('');
function inspect() {
fields.value = (control.value?.inputRefs ?? []).map((el) => el?.value ?? '').join('|');
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>表单与可访问性
字段具有逐位可访问名称和 one-time-code 自动填充提示。ariaLabel 设置组名称；FormItem 有 label 时组关联该 label。validateEvent 默认 true，控制 change/blur 校验。
表单关联与校验
<template>
<!-- prettier-ignore -->
<div class="example">
<AsamCheckboxItem v-model="disabled"> 禁用整个表单</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent"> 自动 change/blur 校验</AsamCheckboxItem>
<AsamBaseForm
ref="form"
:model="model"
:rules="rules"
:disabled="disabled"
size="big"
>
<AsamFormItem label="验证码" prop="code">
<AsamInputOtp v-model="model.code" :length="4" :validate-event="validateEvent" />
</AsamFormItem>
<AsamButton type="default" native-type="button" @click="validate">校验</AsamButton>
</AsamBaseForm>
<output>{{ result }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputOtpFormExample' });
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamInputOtp,
AsamBaseForm,
AsamFormItem
} from '@asam-ui/ui';
import type { AsamBaseFormExpose } from '@asam-ui/ui';
const model = ref({ code: '' });
const disabled = ref(false);
const validateEvent = ref(true);
const form = ref<AsamBaseFormExpose>();
const rules = {
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ min: 4, message: '请输入4位', trigger: 'change' }
]
};
const result = ref('');
async function validate() {
try {
await form.value?.validate();
result.value = '通过';
} catch {
result.value = '请完善验证码';
}
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style><template>
<!-- prettier-ignore -->
<div class="example">
<AsamCheckboxItem v-model="disabled"> 禁用整个表单</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent"> 自动 change/blur 校验</AsamCheckboxItem>
<AsamBaseForm
ref="form"
:model="model"
:rules="rules"
:disabled="disabled"
size="big"
>
<AsamFormItem label="验证码" prop="code">
<AsamInputOtp v-model="model.code" :length="4" :validate-event="validateEvent" />
</AsamFormItem>
<AsamButton type="default" native-type="button" @click="validate">校验</AsamButton>
</AsamBaseForm>
<output>{{ result }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputOtpFormExample' });
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamInputOtp,
AsamBaseForm,
AsamFormItem
} from '@asam-ui/ui';
const model = ref({ code: '' });
const disabled = ref(false);
const validateEvent = ref(true);
const form = ref();
const rules = {
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ min: 4, message: '请输入4位', trigger: 'change' }
]
};
const result = ref('');
async function validate() {
try {
await form.value?.validate();
result.value = '通过';
} catch {
result.value = '请完善验证码';
}
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>API 阅读方式
公开契约包含固定 2.14.7 的 13 个属性、5 个事件、separator 插槽和 3 项 expose，以及 ASAM 四档尺寸。功能完整性由实际行为与示例证明，属性数量不能作为功能数量。保持有限正整数 length；浏览器自动填充和操作系统输入法需在目标平台验证。
API
属性 AsamInputOtpProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
modelValue | 字符串模型；数字仅用于初始化。 | string | number | undefined | — |
length | 字段数量，默认 6。 | number | undefined | 6 |
validator | 校验各字符及目标索引，包括粘贴的内容。 | ((char: string, index: number) => boolean) | undefined | () => true |
inputmode | 原生键盘输入模式。 | enum"text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal"完整类型："text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined | — |
type | 字段外观：outlined、filled 或 underlined，默认 outlined。 | enum"filled" | "outlined" | "underlined"完整类型："filled" | "outlined" | "underlined" | undefined | 'outlined' |
size | 显式控件密度；省略时继承按钮组、表单和配置提供器。 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
mask | 将各字符显示为密码字段。 | boolean | undefined | false |
disabled | 禁用状态；省略时继承所在表单。 | boolean | undefined | undefined |
readonly | 禁止编辑，但保留聚焦和导航能力。 | boolean | undefined | false |
id | 分组标识，同时用于 FormItem 标签关联。 | string | undefined | — |
validateEvent | 触发表单项 change/blur 校验，默认 true。 | boolean | undefined | true |
separator | 字段之间的文字、VNode 或按索引计算的分隔内容。 | 查看完整类型string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined | — |
ariaLabel | 未提供 FormItem 标签时，分组的无障碍名称。 | string | undefined | — |
事件 AsamInputOtpEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: string] | — |
change | 离开整个分组且值已变化时触发。 | [value: string] | — |
finish | 一次编辑填满全部字段后触发。 | [value: string] | — |
focus | 组内字段之间切换焦点，不触发分组的 focus/blur。 | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
插槽 AsamInputOtpSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
separator | 分隔符之前的字段索引；最后一项之后没有分隔符。 | ((props: { index: number; }) => unknown) | undefined | — |
实例方法与状态 AsamInputOtpExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
inputRefs | 按字段顺序提供实时原生字段元素。 | (HTMLInputElement | undefined)[] | — |
focus | 聚焦指定字段，超出范围时限制到可用字段范围。 | (index?: number) => void | — |
blur | 使当前字段失焦。 | () => void | — |
关联组件
参数与事件补充说明
一次性验证码输入；更新值为字符串，以保留前导零。
参数与事件说明
modelValue
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：undefined（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
length
必填：否；声明来源：ASAM 声明。
默认值与来源
6（源码表达式；ASAM 声明）固定上游文档默认：6（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
validator
必填：否；声明来源：ASAM 声明。
validator 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(char: string, index: number): boolean
默认值与来源
() => true（源码表达式；ASAM 声明）固定上游文档默认：() => true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
inputmode
必填：否；声明来源：ASAM 声明。
inputmode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："text" / "email" / "search" / "tel" / "url" / "none" / "numeric" / "decimal"
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
type
必填：否；声明来源：ASAM 声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："filled" / "outlined" / "underlined"
默认值与来源
'outlined'（源码表达式；ASAM 声明）固定上游文档默认：'outlined'（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
mask
必填：否；声明来源：ASAM 声明。
mask 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（源码表达式；ASAM 声明）固定上游文档默认：undefined（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
readonly
必填：否；声明来源：ASAM 声明。
readonly 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
validateEvent
必填：否；声明来源：ASAM 声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（源码表达式；ASAM 声明）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
separator
必填：否；声明来源：ASAM 声明。
separator 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number): string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>
separator.type:VNodeTypes— 依赖声明事件参数：
(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "type">>, (...args: never[]) => unknown>>[1]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.props:(VNodeProps & { [key: string]: any; }) | null— 依赖声明separator.key:PropertyKey | null— 依赖声明separator.ref:PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "ref">— 依赖声明separator.ref.i:ComponentInternalInstance— 依赖声明组件实例。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.ref.r:VNodeRef— 依赖声明实际 ref。
事件参数：
(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.ref.k:string | undefined— 依赖声明setup 中的 ref 键。
separator.ref.f:boolean | undefined— 依赖声明refInFor 标记。
枚举：
false/true
separator.scopeId:string | null— 依赖声明仅用于 SFC；创建 VNode 时由 currentScopeId 赋值，与 currentRenderingInstance 配合使用。
separator.children:VNodeNormalizedChildren— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component:ComponentInternalInstance | null— 依赖声明separator.component.uid:number— 依赖声明separator.component.type:ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions, {}, any>— 依赖声明事件参数：
(props: {}, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "component">>, "type">>, (...args: never[]) => unknown>>[1]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.parent:ComponentInternalInstance | null— 依赖声明嵌套展开边界：递归引用；完整类型见公开类型视图。
separator.component.root:ComponentInternalInstance— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.appContext:AppContext— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.vnode:VNode<RendererNode, RendererElement, { [key: string]: any; }>— 依赖声明父虚拟 DOM 中代表当前组件的 VNode。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.subTree:VNode<RendererNode, RendererElement, { [key: string]: any; }>— 依赖声明当前组件自身虚拟 DOM 树的根 VNode。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.effect:ReactiveEffect<any>— 依赖声明渲染副作用实例。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.update:() => void— 依赖声明强制更新渲染副作用。
事件参数：
(): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.job:PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "component">>, "job">— 依赖声明交给调度器的渲染任务，会检查是否需要更新。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.proxy:ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null— 依赖声明separator.component.exposed:Record<string, any> | null— 依赖声明separator.component.exposeProxy:Record<string, any> | null— 依赖声明separator.component.data:PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "component">>, "data">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.props:PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "component">>, "props">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.attrs:PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "component">>, "attrs">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.slots:PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "component">>, "slots">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.refs:PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "component">>, "refs">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.emit:(event: string, ...args: any[]) => void— 依赖声明事件参数：
(event: string, ...args: any[]): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.component.isMounted:boolean— 依赖声明枚举：
false/trueseparator.component.isUnmounted:boolean— 依赖声明枚举：
false/trueseparator.component.isDeactivated:boolean— 依赖声明枚举：
false/true
separator.dirs:DirectiveBinding<any, string, any>[] | null— 依赖声明separator.transition:TransitionHooks<RendererElement> | null— 依赖声明separator.transition.mode:"default" | "in-out" | "out-in" | undefined— 依赖声明枚举：
"default"/"in-out"/"out-in"separator.transition.persisted:boolean— 依赖声明枚举：
false/trueseparator.transition.beforeEnter:(el: RendererElement) => void— 依赖声明事件参数：
(el: RendererElement): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.transition.enter:(el: RendererElement) => void— 依赖声明事件参数：
(el: RendererElement): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.transition.leave:(el: RendererElement, remove: () => void) => void— 依赖声明事件参数：
(el: RendererElement, remove: () => void): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.transition.clone:(vnode: VNode) => TransitionHooks<RendererElement>— 依赖声明事件参数：
(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): TransitionHooks<RendererElement>嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.transition.afterLeave:(() => void) | undefined— 依赖声明事件参数：
(): voidseparator.transition.delayLeave:((el: RendererElement, earlyRemove: () => void, delayedLeave: () => void) => void) | undefined— 依赖声明事件参数：
(el: RendererElement, earlyRemove: () => void, delayedLeave: () => void): voidseparator.transition.delayedLeave:(() => void) | undefined— 依赖声明事件参数：
(): void
separator.el:RendererNode | null— 依赖声明separator.placeholder:RendererNode | null— 依赖声明separator.anchor:RendererNode | null— 依赖声明separator.target:RendererElement | null— 依赖声明separator.targetStart:RendererNode | null— 依赖声明separator.targetAnchor:RendererNode | null— 依赖声明separator.suspense:SuspenseBoundary | null— 依赖声明separator.suspense.vnode:VNode<RendererNode, RendererElement, SuspenseProps>— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parent:SuspenseBoundary | null— 依赖声明嵌套展开边界：递归引用；完整类型见公开类型视图。
separator.suspense.parentComponent:ComponentInternalInstance | null— 依赖声明separator.suspense.parentComponent.uid:number— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.parentComponent.type:ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions, {}, any>— 依赖声明事件参数：
(props: {}, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "parentComponent">>, "type">>, (...args: never[]) => unknown>>[1]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.parent:ComponentInternalInstance | null— 依赖声明嵌套展开边界：递归引用；完整类型见公开类型视图。
separator.suspense.parentComponent.root:ComponentInternalInstance— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.appContext:AppContext— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.vnode:VNode<RendererNode, RendererElement, { [key: string]: any; }>— 依赖声明父虚拟 DOM 中代表当前组件的 VNode。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.subTree:VNode<RendererNode, RendererElement, { [key: string]: any; }>— 依赖声明当前组件自身虚拟 DOM 树的根 VNode。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.effect:ReactiveEffect<any>— 依赖声明渲染副作用实例。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.update:() => void— 依赖声明强制更新渲染副作用。
事件参数：
(): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.job:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "parentComponent">>, "job">— 依赖声明交给调度器的渲染任务，会检查是否需要更新。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.proxy:ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.parentComponent.exposed:Record<string, any> | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.parentComponent.exposeProxy:Record<string, any> | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.parentComponent.data:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "parentComponent">>, "data">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.props:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "parentComponent">>, "props">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.attrs:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "parentComponent">>, "attrs">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.slots:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "parentComponent">>, "slots">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.refs:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "parentComponent">>, "refs">— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.emit:(event: string, ...args: any[]) => void— 依赖声明事件参数：
(event: string, ...args: any[]): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.parentComponent.isMounted:boolean— 依赖声明枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.parentComponent.isUnmounted:boolean— 依赖声明枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.parentComponent.isDeactivated:boolean— 依赖声明枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.namespace:ElementNamespace— 依赖声明枚举：
"svg"/"mathml"嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.container:RendererElement— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.hiddenContainer:RendererElement— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.activeBranch:VNode<RendererNode, RendererElement, { [key: string]: any; }> | null— 依赖声明separator.suspense.activeBranch.type:VNodeTypes— 依赖声明事件参数：
(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "activeBranch">>, "type">>, (...args: never[]) => unknown>>[1]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.activeBranch.props:(VNodeProps & { [key: string]: any; }) | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.key:PropertyKey | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.ref:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "activeBranch">>, "ref">— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.scopeId:string | null— 依赖声明仅用于 SFC；创建 VNode 时由 currentScopeId 赋值，与 currentRenderingInstance 配合使用。
嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.children:VNodeNormalizedChildren— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.activeBranch.component:ComponentInternalInstance | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.dirs:DirectiveBinding<any, string, any>[] | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.transition:TransitionHooks<RendererElement> | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.el:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.placeholder:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.anchor:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.target:RendererElement | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.targetStart:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.targetAnchor:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.suspense:SuspenseBoundary | null— 依赖声明嵌套展开边界：递归引用；完整类型见公开类型视图。
separator.suspense.activeBranch.shapeFlag:number— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.patchFlag:number— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.activeBranch.appContext:AppContext | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.isFallbackMountPending:boolean— 依赖声明枚举：
false/trueseparator.suspense.pendingBranch:VNode<RendererNode, RendererElement, { [key: string]: any; }> | null— 依赖声明separator.suspense.pendingBranch.type:VNodeTypes— 依赖声明事件参数：
(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "pendingBranch">>, "type">>, (...args: never[]) => unknown>>[1]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.pendingBranch.props:(VNodeProps & { [key: string]: any; }) | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.key:PropertyKey | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.ref:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "pendingBranch">>, "ref">— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.scopeId:string | null— 依赖声明仅用于 SFC；创建 VNode 时由 currentScopeId 赋值，与 currentRenderingInstance 配合使用。
嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.children:VNodeNormalizedChildren— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.pendingBranch.component:ComponentInternalInstance | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.dirs:DirectiveBinding<any, string, any>[] | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.transition:TransitionHooks<RendererElement> | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.el:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.placeholder:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.anchor:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.target:RendererElement | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.targetStart:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.targetAnchor:RendererNode | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.suspense:SuspenseBoundary | null— 依赖声明嵌套展开边界：递归引用；完整类型见公开类型视图。
separator.suspense.pendingBranch.shapeFlag:number— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.patchFlag:number— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.pendingBranch.appContext:AppContext | null— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
separator.suspense.deps:number— 依赖声明separator.suspense.pendingId:number— 依赖声明separator.suspense.timeout:number— 依赖声明separator.suspense.isInFallback:boolean— 依赖声明枚举：
false/trueseparator.suspense.isHydrating:boolean— 依赖声明枚举：
false/trueseparator.suspense.isUnmounted:boolean— 依赖声明枚举：
false/trueseparator.suspense.effects:Function[]— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.resolve:(force?: boolean, sync?: boolean) => void— 依赖声明事件参数：
(force?: boolean | undefined, sync?: boolean | undefined): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.fallback:(fallbackVNode: VNode) => void— 依赖声明事件参数：
(fallbackVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.move:PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "move">— 依赖声明事件参数：
(container: RendererElement, anchor: RendererNode | null, type: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "move">>, (...args: never[]) => unknown>>[2]): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.next:() => RendererNode | null— 依赖声明事件参数：
(): RendererNode | null嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.registerDep:PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "registerDep">— 依赖声明事件参数：
(instance: ComponentInternalInstance, setupRenderEffect: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined>, "suspense">>, "registerDep">>, (...args: never[]) => unknown>>[1], optimized: boolean): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.suspense.unmount:(parentSuspense: SuspenseBoundary | null, doRemove?: boolean) => void— 依赖声明事件参数：
(parentSuspense: SuspenseBoundary | null, doRemove?: boolean | undefined): void嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.shapeFlag:number— 依赖声明separator.patchFlag:number— 依赖声明separator.appContext:AppContext | null— 依赖声明separator.appContext.app:App<any>— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.appContext.config:AppConfig— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.appContext.mixins:ComponentOptions<{}, any, any, any, any, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>[]— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.appContext.components:Record<string, Component<any, any, any, ComputedOptions, MethodOptions, {}, any>>— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.appContext.directives:Record<string, Directive<any, any, string, any>>— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
separator.appContext.provides:Record<string | symbol, any>— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
ariaLabel
必填：否；声明来源：ASAM 声明。
AsamInputOtpProps 公开类型视图
import type { VNode, VNodeTypes, Attrs, VNodeProps, ComponentInternalInstance, VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNodeNormalizedChildren, ConcreteComponent, ComputedOptions, MethodOptions, AppContext, RendererNode, RendererElement, ReactiveEffect, DirectiveBinding, TransitionHooks, SuspenseBoundary, SuspenseProps, ElementNamespace, App, AppConfig, ComponentOptions, Component, Directive } from 'vue';
import type { AsamInputOtpProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamInputOtpProps
type PublicContract = {
readonly "modelValue"?: string | number | undefined;
readonly "length"?: number | undefined;
readonly "validator"?: ((char: string, index: number) => boolean) | undefined;
readonly "inputmode"?: "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
readonly "type"?: "filled" | "outlined" | "underlined" | undefined;
readonly "size"?: AsamControlSize | undefined;
readonly "mask"?: boolean | undefined;
readonly "disabled"?: boolean | undefined;
readonly "readonly"?: boolean | undefined;
readonly "id"?: string | undefined;
readonly "validateEvent"?: boolean | undefined;
readonly "separator"?: string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | ((index: number) => string | import("vue").VNode) | undefined;
readonly "ariaLabel"?: string | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
finish
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
blur
必填：是；声明来源：ASAM 声明。
AsamInputOtpEmits 公开类型视图
import type { AsamInputOtpEmits } from '@asam-ui/ui';
// AsamInputOtpEmits
type PublicContract = {
"update:modelValue": [value: string];
"change": [value: string];
"finish": [value: string];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
};参数与事件说明
separator
必填：否；声明来源：ASAM 声明。
separator 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { index: number; }): unknown
AsamInputOtpSlots 公开类型视图
import type { AsamInputOtpSlots } from '@asam-ui/ui';
// AsamInputOtpSlots
type PublicContract = {
"separator"?: ((props: { index: number; }) => unknown) | undefined;
};参数与事件说明
inputRefs
必填：是；声明来源：ASAM 声明。
inputRefs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index?: number | undefined): void
blur
必填：是；声明来源：ASAM 声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamInputOtpExpose 公开类型视图
import type { AsamInputOtpExpose, AsamInputOtpProps } from '@asam-ui/ui';
// AsamInputOtpExpose
type PublicContract = {
readonly "inputRefs": (HTMLInputElement | undefined)[];
"focus": (index?: number) => void;
"blur": () => void;
};