Tuniao UI Uniapp V3

Appearance

12:13

图鸟UI vue3 uniapp 插件 - 验证码输入 ​

该组件用于展示与时间相关的信息，如日志、签到记录等。

仓库地址 ​

Github

npmjs

安装方式 ​

bash
npm i tnuiv3p-tn-verify-code-input
npm i tnuiv3p-tn-verify-code-input
bash
pnpm add tnuiv3p-tn-verify-code-input
pnpm add tnuiv3p-tn-verify-code-input
bash
yarn i tnuiv3p-tn-verify-code-input
yarn i tnuiv3p-tn-verify-code-input

组件位置 ​

typescript
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

  • 通过v-model绑定验证码的值
  • 通过length控制验证码的长度，默认值为4
vue
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" />
</template>

设置长度为6的验证码 ​

vue
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" :length="6" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" :length="6" />
</template>

验证码提示框类型 ​

边框提示框 - border (默认) ​

将input-type设置为border即可设置边框提示框

此时的提示框显示为一个边框，如果设置了breath为true边框在当前选中时会有呼吸灯的效果，通过inactive-color设置边框默认的颜色，通过active-color设置边框当前选中时的颜色

vue
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="border" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="border" />
</template>

边框带垂直竖线 - border-vline ​

将input-type设置为border-vline即可设置边框带垂直竖线

此时的提示框显示为一个边框且中间有一个垂直的竖线，如果设置了breath为true时垂直的竖线显示为呼吸灯的效果，通过inactive-color设置边框和垂直竖线默认的颜色，通过active-color设置边框和垂直竖线当前选中时的颜色

vue
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="border-vline" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="border-vline" />
</template>

边框带居中横线 - border-hline ​

将input-type设置为border-hline即可设置边框带居中横线

此时的提示框显示为一个边框且中间有一个居中的横线，如果设置了breath为true时居中的横线显示为呼吸灯的效果，通过inactive-color设置边框和居中横线默认的颜色，通过active-color设置边框和居中横线当前选中时的颜色

vue
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="border-hline" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="border-hline" />
</template>

垂直居中竖线 - middle-vline ​

将input-type设置为middle-vline即可设置垂直居中竖线

此时的提示区域显示一条垂直居中的竖线，如果设置了breath为true时竖线显示为呼吸灯的效果，通过inactive-color设置竖线的默认颜色，通过active-color设置竖线选中时的颜色

vue
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="middle-vline" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="middle-vline" />
</template>

居中横线 - middle-hline ​

将input-type设置为middle-hline即可设置居中的横线

此时的提示区域显示一条居中的横线，如果设置了breath为true时横线显示为呼吸灯的效果，通过inactive-color设置横线的默认颜色，通过active-color设置横线选中时的颜色

vue
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="middle-hline" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="middle-hline" />
</template>

底部横线 - bottom-hline ​

将input-type设置为bottom-hline即可设置底部的横线

此时的提示区域显示一条底部的横线，如果设置了breath为true时横线显示为呼吸灯的效果，通过inactive-color设置横线的默认颜色，通过active-color设置横线选中时的颜色

vue
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="bottom-hline" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TnVerifyCodeInput from 'tnuiv3p-tn-verify-code-input/index.vue'

const codeInput = ref<string>('')
</script>

<template>
  <TnVerifyCodeInput v-model="codeInput" input-type="bottom-hline" />
</template>

API ​

Props ​

属性名说明类型默认值可选值
v-model / model-value验证码的值String | Number--
length验证码的长度Number4-
width每一个验证码输入框的宽度，默认单位为rpxString--
focus是否自动聚焦到当前验证码输入框Booleantruefalse
disabled禁用验证码输入框Booleanfalsetrue
breath当前验证码输入框激活时是否显示呼吸灯效果，具体每一个类型对应的说明详细请看上面说明Booleantruefalse
password密码输入Booleanfalsetrue
input-type验证码输入框的类型Stringborderborder-vline \ border-hline \ middle-hline \ middle-vline \ bottom-hline
inactive-color默认显示提示框的颜色String--
active-color激活时提示框显示的颜色String--
validate-event输入时是否触发表单验证Booleantruefalse

Emits ​

事件名说明类型
input验证码输入时触发(value: string | number) => void
change验证码发送改变时触发(value: string |number) => void
complete验证码输入完成时触发() => void

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI