InputOtp 验证码 ​

<template>
  <el-input-otp v-model="value" @input="handleInput" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const value = ref([5, 9, 4, 2, 0, 6])

const handleInput = (value: string, index: number) => {
  ElMessage(`input: ${value}-${index}`)
}
</script>

<template>
  <p>只读状态、禁用状态、密码</p>
  <el-input-otp v-model="value" readonly /> <br />
  <el-input-otp v-model="value" disabled /> <br />
  <el-input-otp v-model="value" show-password /> <br />
</template>

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

const value = ref([5, 9, 4, 2, 0, 6])
</script>

<template>
  <p>小、默认、大、铺平</p>
  <el-input-otp v-model="value" size="small" /> <br />
  <el-input-otp v-model="value" /> <br />
  <el-input-otp v-model="value" size="large" /> <br />
  <el-input-otp v-model="value" size="auto" /> <br />
</template>

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

const value = ref([5, 9, 4, 2, 0, 6])
</script>

<template>
  <el-input-otp v-model="value" :length="4" />
</template>

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

const value = ref([])
</script>

<template>
  <el-input-otp v-model="value">
    <template #default="{ index }">
      <span v-if="index === 1" style="margin-left: 8px"> - </span>
      <span v-if="index === 3" style="margin-left: 8px"> - </span>
    </template>
  </el-input-otp>
</template>

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

const value = ref([5, 9, 4, 2, 0, 6])
</script>

<template>
  <el-space direction="vertical">
    <p>只允许数字输入</p>
    <el-input-otp v-model="value" :validator="verifyNumber" />
    <p>只允许英文字母输入</p>
    <el-input-otp v-model="value2" :validator="verifyEnglish" />
  </el-space>
</template>

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

const value = ref([])
const value2 = ref([])

const verifyNumber = (value: string) => !value || /^\d+$/.test(value)
const verifyEnglish = (value: string) => !value || /^[a-zA-Z]+$/.test(value)
</script>

<template>
  <el-form
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="验证码" prop="otp" required>
      <el-input-otp v-model="ruleForm.otp" />
    </el-form-item>
    <el-form-item>
      <el-submit type="primary" @submit="handleSubmit"> 提交 </el-submit>
      <el-reset>重置</el-reset>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { isDef } from 'element-plus-x'
import { ElForm, ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'

const ruleForm = reactive({
  otp: [],
})

const validateOtp = (rule: any, value: any, callback: any) => {
  if (value.length === 6 && value.every((val) => isDef(val) && val !== '')) {
    return /^\d+$/.test(value.join('').trim())
      ? callback()
      : callback('只能输入数字')
  } else {
    return callback(new Error('请输入完整的内容'))
  }
}

const rules = reactive<FormRules<typeof ruleForm>>({
  otp: [{ validator: validateOtp, trigger: 'blur' }],
})

const handleSubmit = (values) => {
  ElMessage.success(JSON.stringify(values, null, 2))
}
</script>