shangfutong-ui/jeepay-ui-uapp-agent/components/verification-code-style2/verification-code-style2.vue

<template>
  <view class="verification_code">
    <view class="verification_code_continor">
      <view
        class="verification_code_item"
        v-for="(item, index) in latticeNum"
        :key="index"
        :style="
          blurShowLocal &&
          (inputValues.length === index || (inputValues.length === latticeNum && index === latticeNum - 1))
            ? borderCheckStyle
            : borderStyle
        "
        @tap="latticeFoc(index)"
      >
        <block v-if="inputValues[index]">
          <view v-if="ciphertextSty == 1" class="point"></view>
          <block v-else>{{ ciphertextSty == 2 ? "*" : inputValues[index] }}5</block>
        </block>
      </view>
    </view>
    <input
      type="number"
      :type="inputType"
      focus
      :maxlength="lattice"
      class="input_info"
      v-model="text"
      @input="inputVal"
      @blur="blur"
      @focus="focus"
      ref="input"
    />
  </view>
</template>

<script>
export default {
  props: {
    // 输入框框框的个数
    latticeNum: {
      type: Number,
      default: 4,
    },
    // 未选中样式
    borderStyle: {
      type: String,
      default: "border:1rpx solid #DADEE6;border-radius: 12rpx;",
    },
    // 选中的样式
    borderCheckStyle: {
      type: String,
      default: "border:2rpx solid #7737FE;border-radius: 12rpx;",
    },
    // input类型
    inputType: {
      type: String,
      default: "number",
    },
    // 失去焦点后是否继续显示，当前所对焦的输入框（样式）
    blurShow: {
      type: Boolean,
      default: false,
    },
    // 密文样式  1 圆点样式    2 星号 *  样式   默认为0   无密文
    ciphertextSty: {
      type: Number,
      default: 2,
    },
    // 是否允许修改/填写某一个框框的值
    updateOne: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      inputValues: [], //输入的值
      blurShowLocal: true,
      // cursor:null
      lattice: 6,
      keyCodeArr: [],
      text: "",
    }
  },
  mounted() {
    this.blurShowLocal = this.blurShow
    // if (this.updateOne) {
    // 	let arr = [];
    // 	for (let i = 0; i < this.latticeNum; i++) {
    // 		arr.push(' ');
    // 	}
    // 	this.inputValues = arr;
    // }
  },
  methods: {
    /**
     * 输入框的值
     */

    inputVal(e) {
      //#ifdef MP-WEIXIN
      let keyCode = e.detail.keyCode
      if (this.inputValues.length < 6) {
        if (keyCode === 8 && this.inputValues.length > 0) {
          this.inputValues.pop()
        } else {
          if (keyCode < 48 || keyCode > 57) {
            uni.showToast({
              icon: "none",
              title: "请输入数字",
              duration: 1000,
            })
          } else {
            this.keyCodeArr.push(keyCode)
            if (this.keyCodeArr.length < 6) {
              this.lattice += 1
            } else if (this.keyCodeArr.length >= 6) {
              this.keyCodeArr = []
              this.lattice = 6
            }

            let codeObj = {
              48: "0",
              49: "1",
              50: "2",
              51: "3",
              52: "4",
              53: "5",
              54: "6",
              55: "7",
              56: "8",
              57: "9",
            }

            this.inputValues.push(codeObj[keyCode])
            this.$emit("getInputVerification", this.inputValues.join(""))
            // console.log(this.inputValues)
          }
        }
      } else if (keyCode === 8 && this.inputValues.length > 0) {
        this.inputValues.pop()
        return
      }

      //#endif
      //#ifdef APP || H5
      this.inputValues = this.text
      this.$emit("getInputVerification", this.inputValues)
      //#endif
    },
    // 设置验证码的值
    /**
     * verificationCodeValue  数组
     */
    setVerificationCode(verificationCodeValue = []) {
      this.inputValues = verificationCodeValue
    },
    /**
     * 清空验证码的值
     */
    cleanVal() {
      this.inputValues = []
      this.text = ""
    },
    latticeFoc(index) {},
    blur() {
      !this.blurShow ? (this.blurShowLocal = false) : ""
    },
    focus() {
      !this.blurShow ? (this.blurShowLocal = true) : ""
    },
  },
}
</script>

<style lang="scss">
.verification_code {
  // width: 260rpx;
  // margin: 20rpx auto;
  position: relative;
  overflow: hidden;

  .verification_code_continor {
    display: flex;
    text-align: center;
    justify-content: center;
    // background-color: beige;
    .verification_code_item {
      box-sizing: border-box;
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      background-color: #fff;
      // border-radius: 12rpx;
      margin-top: 6rpx;
    }

    .verification_code_item:not(:first-child) {
      margin-left: 20rpx;
    }
    .point {
      width: 20rpx;
      height: 20rpx;
      background-color: black;
      border-radius: 200px;
    }
  }

  .input_info {
    width: 200%;
    height: 100rpx;
    border: 1px solid $primaryColor;
    position: absolute;
    opacity: 0;
    -khtml-opacity: 0;
    top: -10rpx;
    left: -100%;
  }
}
</style>