帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue 3 OTP Input 密码输入框输入组件

帝国模板之家 2022-03-08 网页特效 评论

描述:

Vue 3 高度可定制的密码输入组件。

如何使用:

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

// locally
import VOtpInput from 'vue3-otp-input';
export default defineComponent({
  components: {
    VOtpInput,
  },
});
// globally
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,
},
placeholder: {
  type: Array,
  default: [],
},
isDisabled: {
  type: Boolean,
  default: false,
},
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言