input实现手机验证码输入

原创

于 2023-10-27 17:57:34 发布 · 819 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了如何使用Vue.js创建一个动态验证码输入组件，通过input框的输入实现自动填充代码，展示了HTML模板、TypeScript脚本和Less样式表的实现细节。

实现效果：
在这里插入图片描述
实现思路：

将code框定位到input框上
通过input的输入实现验证码的输入
将input输入的支赋值在code框上

在这里插入图片描述

小demo：

<template>
    <a-row :gutter="[12, 12]" class="m-12">
        <a-col :span="24">
            <div class="code-group">
                <div class="pc_in">
                    <div class="block">
                        <div class="g_hx">{
  
  { codeValue?.toString().substring(0, 1) || '' }}</div>
                        <