小程序diamante

jiangping

2023-10-26 627c3e0a6920131d75eafa4646db373ccc936546

 minipro_standard/uni_modules/uview-ui/components/u-code-input/u-code-input.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,252 @@
<template>
   <view class="u-code-input">
      <view
         class="u-code-input__item"
         :style="[itemStyle(index)]"
         v-for="(item, index) in codeLength"
         :key="index"
      >
         <view
            class="u-code-input__item__dot"
            v-if="dot && codeArray.length > index"
         ></view>
         <text
            v-else
            :style="{
               fontSize: $u.addUnit(fontSize),
               fontWeight: bold ? 'bold' : 'normal',
               color: color
            }"
         >{{codeArray[index]}}</text>
         <view
            class="u-code-input__item__line"
            v-if="mode === 'line'"
            :style="[lineStyle]"
         ></view>
         <!-- #ifndef APP-PLUS -->
         <view v-if="isFocus && codeArray.length === index" :style="{backgroundColor: color}" class="u-code-input__item__cursor"></view>
         <!-- #endif -->
      </view>
      <input
         :disabled="disabledKeyboard"
         type="number"
         :focus="focus"
         :value="inputValue"
         :maxlength="maxlength"
         :adjustPosition="adjustPosition"
         class="u-code-input__input"
         @input="inputHandler"
         :style="{
            height: $u.addUnit(size) 
         }"
         @focus="isFocus = true"
         @blur="isFocus = false"
      />
   </view>
</template>

<script>
   import props from './props.js';
   /**
    * CodeInput éªŒè¯ç è¾“å…¥
    * @description è¯¥ç»„件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
    * @tutorial https://www.uviewui.com/components/codeInput.html
    * @property {String | Number}   maxlength         æœ€å¤§è¾“入长度 ï¼ˆé»˜è®¤ 6 ï¼‰
    * @property {Boolean}         dot               æ˜¯å¦ç”¨åœ†ç‚¹å¡«å…… ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String}         mode            æ˜¾ç¤ºæ¨¡å¼ï¼Œbox-盒子模式，line-底部横线模式 ï¼ˆé»˜è®¤ 'box' ï¼‰
    * @property {Boolean}         hairline         æ˜¯å¦ç»†è¾¹æ¡† ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String | Number}   space            å­—符间的距离 ï¼ˆé»˜è®¤ 10 ï¼‰
    * @property {String | Number}   value            é¢„置值
    * @property {Boolean}         focus            æ˜¯å¦è‡ªåŠ¨èŽ·å–焦点 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {Boolean}         bold            å­—体和输入横线是否加粗 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String}         color            å­—体颜色 ï¼ˆé»˜è®¤ '#606266' ï¼‰
    * @property {String | Number}   fontSize         å­—体大小，单位px ï¼ˆé»˜è®¤ 18 ï¼‰
    * @property {String | Number}   size            è¾“入框的大小，宽等于高 ï¼ˆé»˜è®¤ 35 ï¼‰
    * @property {Boolean}         disabledKeyboard   æ˜¯å¦éšè—åŽŸç”Ÿé”®ç›˜ï¼Œå¦‚果想用自定义键盘的话，需设置此参数为true ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String}         borderColor         è¾¹æ¡†å’Œçº¿æ¡é¢œè‰² ï¼ˆé»˜è®¤ '#c9cacc' ï¼‰
    * @property {Boolean}         disabledDot         æ˜¯å¦ç¦æ­¢è¾“å…¥"."符号 ï¼ˆé»˜è®¤ true ï¼‰
    * 
    * @event {Function}   change   è¾“入内容发生改变时触发，具体见上方说明         value：当前输入的值
    * @event {Function}   finish   è¾“入字符个数达maxlength值时触发，见上方说明   value：当前输入的值
    * @example   <u-code-input v-model="value4" :focus="true"></u-code-input>
    */
   export default {
      name: 'u-code-input',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            inputValue: '',
            isFocus: this.focus
         }
      },
      watch: {
         value: {
            immediate: true,
            handler(val) {
               // è½¬ä¸ºå­—符串，超出部分截掉
               this.inputValue = String(val).substring(0, this.maxlength)
            }
         },
      },
      computed: {
         // æ ¹æ®é•¿åº¦ï¼Œå¾ªçŽ¯è¾“入框的个数，因为头条小程序数值不能用于v-for
         codeLength() {
            return new Array(Number(this.maxlength))
         },
         // å¾ªçŽ¯item的样式
         itemStyle() {
            return index => {
               const addUnit = uni.$u.addUnit
               const style = {
                  width: addUnit(this.size),
                  height: addUnit(this.size)
               }
               // ç›’子模式下，需要额外进行处理
               if (this.mode === 'box') {
                  // è®¾ç½®ç›’子的边框，如果是细边框，则设置为0.5px宽度
                  style.border = `${this.hairline ? 0.5 : 1}px solid ${this.borderColor}`
                  // å¦‚果盒子间距为0的话
                  if (uni.$u.getPx(this.space) === 0) {
                     // ç»™ç¬¬ä¸€å’Œæœ€åŽä¸€ä¸ªç›’子设置圆角
                     if (index === 0) {
                        style.borderTopLeftRadius = '3px'
                        style.borderBottomLeftRadius = '3px'
                     }
                     if (index === this.codeLength.length - 1) {
                        style.borderTopRightRadius = '3px'
                        style.borderBottomRightRadius = '3px'
                     }
                     // æœ€åŽä¸€ä¸ªç›’子的右边框需要保留
                     if (index !== this.codeLength.length - 1) {
                        style.borderRight = 'none'
                     }
                  }
               }
               if (index !== this.codeLength.length - 1) {
                  // è®¾ç½®éªŒè¯ç å­—符之间的距离，通过margin-right设置，最后一个字符，无需右边框
                  style.marginRight = addUnit(this.space)
               } else {
                  // æœ€åŽä¸€ä¸ªç›’子的有边框需要保留
                  style.marginRight = 0
               }

               return style
            }
         },
         // å°†è¾“入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
         codeArray() {
            return String(this.inputValue).split('')
         },
         // ä¸‹åˆ’线模式下，横线的样式
         lineStyle() {
            const style = {}
            style.height = this.hairline ? '2px' : '4px'
            style.width = uni.$u.addUnit(this.size)
            // çº¿æ¡æ¨¡å¼ä¸‹ï¼ŒèƒŒæ™¯è‰²å³ä¸ºè¾¹æ¡†é¢œè‰²
            style.backgroundColor = this.borderColor
            return style
         }
      },
      methods: {
         // ç›‘听输入框的值发生变化
         inputHandler(e) {
            const value = e.detail.value
            this.inputValue = value
            // æ˜¯å¦å…è®¸è¾“入“.”符号
            if(this.disabledDot) {
               this.$nextTick(() => {
                  this.inputValue = value.replace('.', '')
               })
            }
            // æœªè¾¾åˆ°maxlength之前，发送change事件，达到后发送finish事件
            this.$emit('change', value)
            // ä¿®æ”¹é€šè¿‡v-model双向绑定的值
            this.$emit('input', value)
            // è¾¾åˆ°ç”¨æˆ·æŒ‡å®šè¾“入长度时，发出完成事件
            if (String(value).length >= Number(this.maxlength)) {
               this.$emit('finish', value)
            }
         }
      }
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";
   $u-code-input-cursor-width: 1px;
   $u-code-input-cursor-height: 40%;
   $u-code-input-cursor-animation-duration: 1s;
   $u-code-input-cursor-animation-name: u-cursor-flicker;

   .u-code-input {
      @include flex;
      position: relative;
      overflow: hidden;

      &__item {
         @include flex;
         justify-content: center;
         align-items: center;
         position: relative;

         &__text {
            font-size: 15px;
            color: $u-content-color;
         }

         &__dot {
            width: 7px;
            height: 7px;
            border-radius: 100px;
            background-color: $u-content-color;
         }

         &__line {
            position: absolute;
            bottom: 0;
            height: 4px;
            border-radius: 100px;
            width: 40px;
            background-color: $u-content-color;
         }
         /* #ifndef APP-PLUS */
         &__cursor {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: $u-code-input-cursor-width;
            height: $u-code-input-cursor-height;
            animation: $u-code-input-cursor-animation-duration u-cursor-flicker infinite;
         }
         /* #endif */
			
      }

      &__input {
         // ä¹‹æ‰€ä»¥éœ€è¦input输入框，是因为有它才能唤起键盘
         // è¿™é‡Œå°†å®ƒè®¾ç½®ä¸ºä¸¤å€çš„屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容
         position: absolute;
         left: -750rpx;
         width: 1500rpx;
         top: 0;
         background-color: transparent;
         text-align: left;
      }
   }
	
   /* #ifndef APP-PLUS */
   @keyframes u-cursor-flicker {
      0% {
          opacity: 0;
      }
      50% {
          opacity: 1;
      }
      100% {
          opacity: 0;
      }
   }
   /* #endif */

</style>