Vue 3 一次性密码组件 – vue3-otp-input

Vue 3 一次性密码组件 – vue3-otp-input
插件名称 vue3-otp-input
发布时间 2021年12月16日
插件作者 ejirocodes

一种用于 Vue 3 应用程序的高度可定制的一次性密码输入(也称为 pincode 输入)组件。

安装和下载:

# NPM
$ npm i vue3-otp-input

使用:

1、导入并注册otp-input组件。

// 本地
import VOtpInput from 'vue3-otp-input';
export default defineComponent({
  components: {
    VOtpInput,
  },
});
// 全局
import { createApp } from 'vue'
import App from './App.vue'
import VOtpInput from "vue3-otp-input";
const app = createApp(App)
app.component('v-otp-input', VOtpInput).mount('#app')

2. 将v-otp-input组件添加到模板中。

<v-otp-input
  ref="otpInput"
  input-classes="otp-input"
  separator="-"
  :num-inputs="4"
  :should-auto-focus="true"
  :is-input-num="true"
  @on-change="handleOnChange"
  @on-complete="handleOnComplete"
/>

3.所有默认组件道具。

numInputs: {
  default: 4,
},
separator: {
  type: String,
  default: "**",
},
inputClasses: {
  type: String,
},
inputType: {
  type: String,
  validator: (value: string) =>
    ["number", "tel", "password"].includes(value),
},
shouldAutoFocus: {
  type: Boolean,
  default: false,
},