npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tnuiv3p-tn-verify-code-input

v1.0.3

Published

TuniaoUI vue3 uniapp 插件

Downloads

27

Readme

图鸟 UI vue3 uniapp Plugins - 验证码输入框

TuniaoUI vue3 uniapp

Tuniao UI vue3官方仓库

该组件一般用于验证码的输入提示

组件安装

npm i tnuiv3p-tn-verify-code-input

组件位置

tnuiv3p-tn-verify-code-input/index.vue

平台差异说明

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

基础使用

  • 通过v-model绑定验证码的值
  • 通过length控制验证码的长度,默认值为4
<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的验证码

<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即可设置边框提示框

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

<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即可设置边框带垂直竖线

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

<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即可设置边框带居中横线

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

<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即可设置垂直居中竖线

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

<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即可设置居中的横线

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

<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即可设置底部的横线

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

<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 | 验证码的长度 | Number | 4 | - | | width | 每一个验证码输入框的宽度,默认单位为rpx | String | - | - | | focus | 是否自动聚焦到当前验证码输入框 | Boolean | true | false | | disabled | 禁用验证码输入框 | Boolean | false | true | | breath | 当前验证码输入框激活时是否显示呼吸灯效果,具体每一个类型对应的说明详细请看上面说明 | Boolean | true | false | | input-type | 验证码输入框的类型 | String | border | border-vline \ border-hline \ middle-hline \ middle-vline \ bottom-hline | | inactive-color | 默认显示提示框的颜色 | String | - | - | | active-color | 激活时提示框显示的颜色 | String | - | - | | validate-event | 输入时是否触发表单验证 | Boolean | true | false |

Emits

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