Vue实现验证码控件

1、目标效果

 2、代码

• 结构

<template>
  <div class="vertify-box">
    <div class="vertify">
      <img
        src="@/assets/logo.png"
        alt=""
      >
      <input
        v-model="vertifyCode"
        type="text"
        placeholder="请输入验证码"
      >
    </div>
    <div class="vertify-position">
      <input
        v-model="checkCode"
        type="button"
        @click="createCode"
      >
    </div>
  </div>
</template>

• 交互

<script>
export default {
  data () {
    return {
      vertifyCode: '',
      checkCode: ''
    }
  },
  created () {
    this.createCode()
  },
  methods: {
    /**
     * @description: 创建验证码
     * @param {*}
     * @return {*}
     */
    createCode () {
      // 先清空验证码的输入
      let code = ''
      this.checkCode = ''
      this.vertifyCode = ''
      // 验证码的长度
      const codeLength = 4
      // 随机数
      const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      for (let i = 0; i < codeLength; i++) {
        // 取得随机数的索引（0~35）
        const index = Math.floor(Math.random() * 36)
        // 根据索引取得随机数加到code上
        code += random[index]
      }
      // 把code值赋给验证码
      this.checkCode = code
    }
  }
}
</script>

• 样式

<style lang="less" scoped>
.vertify-box {
  display: flex;
  justify-content: space-around;
  width: 350px;
  height: 100px;
  background-color: black;

  .vertify {
    margin-right: 5px;
    margin-top: 20px;
    width: 203px !important;
    height: 46px;
    line-height: 46px;
    border: 1px solid #00ffb3;
    background: rgba(0, 229, 255, 0.1);
    display: flex;

    img {
      margin: 15px;
      width: 18px;
      height: 18px;
    }

    input {
      flex: 1;
      width: 100%;
      font-size: 16px;
      color: #fff;
      background: transparent;
      border: none;
      &:focus {
        background: transparent;
        outline: none;
      }
    }
  }

  .vertify-position {
    width: 93px;
    height: 46px;
    margin-top: 20px;
    line-height: 46px;

    input {
      width: 100%;
      height: 100%;
      border: 1px solid #00ffb3;
      background: rgba(0, 229, 255, 0.1);
      font-family: 'Microsoft YaHei';
      font-style: italic;
      color: #00ffb3;
      padding: 0 17px;
      letter-spacing: 2px;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
    }
  }
  ::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #ddd;
  }
}
</style>

『参考』

• vue验证码组件 https://www.cnblogs.com/nicknailo/p/9068436.html

• vue中实现验证码 https://blog.csdn.net/qq_40323256/article/details/108165323