vue 短信验证码输入

最新推荐文章于 2024-07-01 11:16:34 发布

gqzydh

最新推荐文章于 2024-07-01 11:16:34 发布

阅读量1k

点赞数

分类专栏： Vue.js 实例文章标签： vue 短信输入

本文链接：https://blog.csdn.net/gqzydh/article/details/100584725

版权

Vue.js 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

实例

11 篇文章 0 订阅

订阅专栏

vue 短信验证码输入
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,viewport-fit=cover">
  <title>cursor-vcode</title>
  <style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background-color: #ffffff;
    font-family: -apple-system, PingFang SC, Hiragino Sans GB, Helvetica Neue, Arial;
    -webkit-tap-highlight-color: transparent;
  }

  .app {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 60px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .heading-2 {
    color: #333333;
  }
  .v-code {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  .v-code input {
    position: absolute;
    top: -100%;
    left: -666666px;
    opacity: 0;
  }

  .v-code .line {
    position: relative;
    width: 40px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 28px;
  }
  .v-code .line::after {
    display: block;
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    bottom: 0;
    height: 1px;
    background-color: #aaaaaa;
    transform: scaleY(.5);
    transform-origin: 0 100%;
  }
  .v-code .line.animated::before {
    display: block;
    position: absolute;
    left: 50%;
    top: 20%;
    width: 1px;
    height: 60%;
    content: '';
    background-color: #333333;
    animation-name: coruscate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }

  /*.v-code .line.animated::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background-color: #000000;
  }*/

  @keyframes coruscate {
    0% {
      opacity: 0
    }
    25% {
      opacity: 0
    }
    50% {
      opacity: 1
    }
    75% {
      opacity: 1
    }
    to {
      opacity: 0
    }
  }
  </style>
</head>

<body>
  <div id="app" class="app">
    <h2 class="heading-2">验证码:</h2>
    <div class="v-code">
      <input
      ref="vcode"
      id="vcode"
      type="tel"
      maxlength="4"
      v-model="aCodes"
      @focus="focused = true"
      @blur="focused = false"
      :disabled="telDisabled">

      <label
        for="vcode"
        class="line"
        v-for="item,index in codeLength"
        :class="{'animated': focused && cursorIndex === index}"
        v-text="codeArr[index]"
      >
      </label>
    </div>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      aCodes: '',
      codeLength: 4,
      telDisabled: false,
      focused: false
    },
    computed: {
      codeArr() {
        return this.aCodes.split('')
      },
      cursorIndex() {
        return this.aCodes.length
      }
    },
    watch: {
      aCodes(newVal) {
       // this.aCodes = newVal.replace(/[^\d]/g,'')
        // if (newVal.length > 5) {
        //   // this.telDisabled = true
        //   this.$refs.vcode.blur()
        
        // }
      }
    },
    mounted() {}
  })
  </script>
</body>
</html>

gqzydh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue 短信验证码输入

vue 短信验证码输入<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,view...
复制链接

扫一扫

专栏目录