验证码输入 InputOtp

type="filled" 对应 Arco VerificationCode，默认 outlined 保留 Element Plus 形态。 属性用法见 Element Plus 文档。

填充式验证码

type="filled" 对应 Arco 的填充格子，size 控制尺寸。

<script setup lang="ts">
import { ref } from 'vue'
const code = ref('12')
</script>

<template>
  <el-input-otp v-model="code" type="filled" />
  <el-input-otp type="filled" size="small" disabled model-value="123456" />
</template>

其他形态

outlined 和 underlined 在 Arco 中没有对应项，保留 Element Plus 形态。

<script setup lang="ts">
import { ref } from 'vue'
const outlined = ref('12')
const underlined = ref('12')
</script>

<template>
  <el-input-otp v-model="outlined" />
  <el-input-otp v-model="underlined" type="underlined" />
</template>

与 Arco 的差异

• 格子固定间距，不像 Arco 按容器宽度平均分布。
• 聚焦已填格子的行为保留 Element Plus；outlined 和 underlined 没有 Arco 对应项。