直播商城源码，uniapp自定义验证码输入框，隐藏光标

一. 实现思路

具体实现思路：

将input标签相对于父元素做绝对定位，与父元素左边距设置为负的本身宽度即可（position: absolute; top: 0; left：-100%; width: 100%; height: 100%;）。

动态去设置input的focus属性。

input同级使用for循环去创建5个正方形的view标签。

给input同级创建的view标签绑定点击事件，在点击事件方法实现中去设置input的focus属性为true，即可弹出键盘。

在键盘输入的时候，即可触发input属性的一系列方法，利用v-model双向绑定，将input输入的值赋值给循环的view方框即可。

这样input也就不在屏幕中，但是又可以触发input的事件。

总的来说就是，使用for循环去创建5个正方形的view标签，然后创建一个input标签，type=tel，最大输入长度为5（根据需求来设置），再将input伪隐藏掉，获取的值分别放到5个view中展示。

验证码失败后利用v-model双向绑定，清空输入的值，增加错误提示文字和边框样式。

二. 代码实现

父组件

<br><uni-popup ref="codeInputPopup" background-color="#fff" :mask-click ="false" type="center"><br>     <CodeInput<br>  :codeLength="5"<br>  :disabled="codeBtnDisabled"<br>  @codeInputClose="codeInputClose"<br>  @submitGoodCode="submitGoodCode"<br>/><br></uni-popup><br><script><br>export default {<br>  data() {<br>    return {<br>      intviation_code:'', //邀请码<br>codeBtnDisabled: false //防止接口请求还未返回数据，用户多次点击<br>    }<br>  },<br>  methods: {<br>    // 提交邀请码<br>async submitGoodCode(intviation_code){<br>this.codeBtnDisabled = true<br>this.intviation_code = intviation_code<br>const response =  await this.$api.post('/ebapi/pink_api/secret_intviation_check', {<br>  code: intviation_code<br>})<br>if(response.code === 200){<br>this.codeBtnDisabled = false<br>this.$refs.codeInputPopup.close()<br>}else{<br>this.codeBtnDisabled = false<br>this.$refs.codeInputPopup.close()<br>this.$api.msg(response.msg)<br>}<br>},<br>codeInputClose(){<br>  this.$refs.codeInputPopup.close()<br>  this.codeBtnDisabled = false<br>}<br>}<br></script> 

子组件

<br><template><br>  <view><br>    <view><br>      <view>请输入商品邀请码</view><br>      <view @click="codeInputClose"><br>        <uni-icons type="closeempty" size="30" color="#999999" /><br>      </view><br>    </view><br>    <!-- 错误提示 --><br>    <view v-if="codeColor == '#ff0000'&& !isNum">邀请码必须{{ codeLength }}位数</view><br>    <view v-if="codeColor == '#ff0000'&& isNum ">邀请码必须是数字</view><br>    <view><br>      <view<br>        v-for="(item, index) in codeLength"<br>        :key="index"<br>       <br>        :style="(index == intviation_code.length? 'border: 5rpx solid #1195db; width: 88rpx; height: 88rpx; line-height: 80rpx;':'color: ' + codeColor + ';' +'border: 2rpx solid' + codeColor)"<br>        @click="focus = true"<br>      >{{ intviation_code[index] && intviation_code[index] || '' }}</view><br>      <input<br>       <br>        type="tel"<br>        v-model="intviation_code"<br>        :maxlength="codeLength"<br>        :focus="focus"<br>        :cursor="intviation_code.length"<br>        @focus="focus = true "<br>        @blur="focus = false"<br>      /><br>    </view><br>    <button<br>      :class="['submit_code_btn', disabled ? 'btn_disabled' : '']"<br>      :disabled="disabled"<br>      @click="submitGoodCode"<br>    >确定</button><br>  </view><br></template><br><script><br>export default {<br>  data() {<br>    return {<br>      codeColor: '#313131', //自定义错误码颜色<br>      intviation_code: '', //用户输入的验证码<br>      focus: false, // 动态获取焦点的值<br>      isNum: false,<br>    }<br>  },<br>  props: {<br>    codeLength: {<br>      type: Number,<br>      default: 5,<br>    },<br>    disabled: {<br>      type: Boolean,<br>      default: false,<br>    },<br>  },<br>  methods: {<br>    codeInputClose() {<br>      this.intviation_code = ''<br>      this.$emit('codeInputClose')<br>    },<br>    submitGoodCode() {<br>      if (this.intviation_code.length === this.codeLength) {<br>        if (Number(this.intviation_code)) {<br>          this.$emit('submitGoodCode', this.intviation_code)<br>        } else {<br>          this.isNum = true<br>          this.publicErrorSetting()<br>        }<br>      } else {<br>        this.publicErrorSetting()<br>      }<br>    },<br>    // 输入不符合规范，更改样式并清空<br>    publicErrorSetting() {<br>      this.codeColor = '#ff0000'<br>      setTimeout(() => {<br>        this.intviation_code = ''<br>        this.codeColor = '#313131'<br>        this.isNum = false<br>      }, 1000)<br>    },<br>  },<br>}<br></script><br><style scoped><br>.code-popup-top {<br>  display: flex;<br>  justify-content: space-between;<br>  align-items: center;<br>  margin-bottom: 50upx;<br>  .code-title {<br>    font-size: 34upx;<br>    color: #333;<br>    font-weight: bold;<br>    position: relative;<br>    &::before {<br>      content: '';<br>      position: absolute;<br>      bottom: 0;<br>      width: 40upx;<br>      height: 19upx;<br>      background: linear-gradient(<br>        to right,<br>        rgba(57, 181, 74, 1),<br>        rgba(57, 181, 74, 0.1)<br>      );<br>    }<br>  }<br>  .close-icon {<br>    background: #f2f4f7;<br>    border-radius: 50%;<br>    display: flex;<br>    align-items: center;<br>    justify-content: center;<br>  }<br>}<br>.code_errow {<br>  font-size: 30upx;<br>  color: #ff5500;<br>  margin-bottom: 20upx;<br>}<br>.submit_code_btn {<br>  width: 100%;<br>  height: 83upx;<br>  line-height: 83upx;<br>  border-radius: 7upx;<br>  background: #39b54a;<br>  color: #fff;<br>  font-size: 31upx;<br>  text-align: center;<br>  margin-top: 45upx;<br>}<br>.btn_disabled {<br>  color: rgba(255, 255, 255, 0.5) !important;<br>  <br>}<br>.code_input_con {<br>  display: flex;<br>  justify-content: space-around;<br>  position: relative;<br>  .code_input_item {<br>    margin-left: 10upx;<br>    text-align: center;<br>    line-height: 88upx;<br>    border-radius: 14upx;<br>    width: 88upx;<br>    height: 88upx;<br>    font-size: 60upx;<br>    font-weight: bold;<br>    color: #333;<br>    &:last-child {<br>      margin-right: 0;<br>    }<br>  }<br>  /*input隐藏掉*/<br>  .cinput {<br>    position: absolute;<br>    top: 0;<br>    left: -100%; <br>    width: 100%;<br>    height: 100%;<br>  }<br>}<br></style>