bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-car-keyboard/u-car-keyboard.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,311 @@
<template>
   <view
      class="u-keyboard"
      @touchmove.stop.prevent="noop"
   >
      <view
         v-for="(group, i) in abc ? engKeyBoardList : areaList"
         :key="i"
         class="u-keyboard__button"
         :index="i"
         :class="[i + 1 === 4 && 'u-keyboard__button--center']"
      >
         <view
            v-if="i === 3"
            class="u-keyboard__button__inner-wrapper"
         >
            <view
               class="u-keyboard__button__inner-wrapper__left"
               hover-class="u-hover-class"
               :hover-stay-time="200"
               @tap="changeCarInputMode"
            >
               <text
                  class="u-keyboard__button__inner-wrapper__left__lang"
                  :class="[!abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
               >中</text>
               <text class="u-keyboard__button__inner-wrapper__left__line">/</text>
               <text
                  class="u-keyboard__button__inner-wrapper__left__lang"
                  :class="[abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
               >英</text>
            </view>
         </view>
         <view
            class="u-keyboard__button__inner-wrapper"
            v-for="(item, j) in group"
            :key="j"
         >
            <view
               class="u-keyboard__button__inner-wrapper__inner"
               :hover-stay-time="200"
               @tap="carInputClick(i, j)"
               hover-class="u-hover-class"
            >
               <text class="u-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
            </view>
         </view>
         <view
            v-if="i === 3"
            @touchstart="backspaceClick"
            @touchend="clearTimer"
            class="u-keyboard__button__inner-wrapper"
         >
            <view
               class="u-keyboard__button__inner-wrapper__right"
               hover-class="u-hover-class"
               :hover-stay-time="200"
            >
               <u-icon
                  size="28"
                  name="backspace"
                  color="#303133"
               ></u-icon>
            </view>
         </view>
      </view>
   </view>
</template>

<script>
   import props from './props.js';
   /**
    * keyboard é”®ç›˜ç»„件
    * @description æ­¤ä¸ºuView自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
    * @tutorial https://uviewui.com/components/keyboard.html
    * @property {Boolean} random æ˜¯å¦æ‰“乱键盘的顺序
    * @event {Function} change ç‚¹å‡»é”®ç›˜è§¦å‘
    * @event {Function} backspace ç‚¹å‡»é€€æ ¼é”®è§¦å‘
    * @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
    */
   export default {
      name: "u-keyboard",
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            // è½¦ç‰Œè¾“入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
            abc: false
         };
      },
      computed: {
         areaList() {
            let data = [
               '京',
               '沪',
               '粤',
               'æ´¥',
               '冀',
               '豫',
               '云',
               'è¾½',
               '黑',
               '湘',
               '皖',
               '鲁',
               '苏',
               '浙',
               'èµ£',
               '鄂',
               '桂',
               '甘',
               '晋',
               '陕',
               '蒙',
               '吉',
               '闽',
               'è´µ',
               '渝',
               '川',
               '青',
               '琼',
               '宁',
               '挂',
               '藏',
               '港',
               'æ¾³',
               '新',
               '使',
               'å­¦'
            ];
            let tmp = [];
            // æ‰“乱顺序
            if (this.random) data = uni.$u.randomArray(data);
            // åˆ‡å‰²æˆäºŒç»´æ•°ç»„
            tmp[0] = data.slice(0, 10);
            tmp[1] = data.slice(10, 20);
            tmp[2] = data.slice(20, 30);
            tmp[3] = data.slice(30, 36);
            return tmp;
         },
         engKeyBoardList() {
            let data = [
               1,
               2,
               3,
               4,
               5,
               6,
               7,
               8,
               9,
               0,
               'Q',
               'W',
               'E',
               'R',
               'T',
               'Y',
               'U',
               'I',
               'O',
               'P',
               'A',
               'S',
               'D',
               'F',
               'G',
               'H',
               'J',
               'K',
               'L',
               'Z',
               'X',
               'C',
               'V',
               'B',
               'N',
               'M'
            ];
            let tmp = [];
            if (this.random) data = uni.$u.randomArray(data);
            tmp[0] = data.slice(0, 10);
            tmp[1] = data.slice(10, 20);
            tmp[2] = data.slice(20, 30);
            tmp[3] = data.slice(30, 36);
            return tmp;
         }
      },
      methods: {
         // ç‚¹å‡»é”®ç›˜æŒ‰é’®
         carInputClick(i, j) {
            let value = '';
            // ä¸åŒæ¨¡å¼ï¼ŒèŽ·å–不同数组的值
            if (this.abc) value = this.engKeyBoardList[i][j];
            else value = this.areaList[i][j];
            // å¦‚果允许自动切换，则将中文状态切换为英文
            if (!this.abc && this.autoChange) uni.$u.sleep(200).then(() => this.abc = true)
            this.$emit('change', value);
         },
         // ä¿®æ”¹æ±½è½¦ç‰Œé”®ç›˜çš„输入模式，中文|英文
         changeCarInputMode() {
            this.abc = !this.abc;
         },
         // ç‚¹å‡»é€€æ ¼é”®
         backspaceClick() {
            this.$emit('backspace');
            clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
            this.timer = null;
            this.timer = setInterval(() => {
               this.$emit('backspace');
            }, 250);
         },
         clearTimer() {
            clearInterval(this.timer);
            this.timer = null;
         },
      }
   };
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";
   $u-car-keyboard-background-color: rgb(224, 228, 230) !default;
   $u-car-keyboard-padding:6px 0 6px !default;
   $u-car-keyboard-button-inner-width:64rpx !default;
   $u-car-keyboard-button-inner-background-color:#FFFFFF !default;
   $u-car-keyboard-button-height:80rpx !default;
   $u-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
   $u-car-keyboard-button-border-radius:4px !default;
   $u-car-keyboard-button-inner-margin:8rpx 5rpx !default;
   $u-car-keyboard-button-text-font-size:16px !default;
   $u-car-keyboard-button-text-color:$u-main-color !default;
   $u-car-keyboard-center-inner-margin: 0 4rpx !default;
   $u-car-keyboard-special-button-width:134rpx !default;
   $u-car-keyboard-lang-font-size:16px !default;
   $u-car-keyboard-lang-color:$u-main-color !default;
   $u-car-keyboard-active-color:$u-primary !default;
   $u-car-keyboard-line-font-size:15px !default;
   $u-car-keyboard-line-color:$u-main-color !default;
   $u-car-keyboard-line-margin:0 1px !default;
   $u-car-keyboard-u-hover-class-background-color:#BBBCC6 !default;

   .u-keyboard {
      @include flex(column);
      justify-content: space-around;
      background-color: $u-car-keyboard-background-color;
      align-items: stretch;
      padding: $u-car-keyboard-padding;

      &__button {
         @include flex;
         justify-content: center;
         flex: 1;
         /* #ifndef APP-NVUE */
         /* #endif */

         &__inner-wrapper {
            box-shadow: $u-car-keyboard-button-inner-box-shadow;
            margin: $u-car-keyboard-button-inner-margin;
            border-radius: $u-car-keyboard-button-border-radius;

            &__inner {
               @include flex;
               justify-content: center;
               align-items: center;
               width: $u-car-keyboard-button-inner-width;
               background-color: $u-car-keyboard-button-inner-background-color;
               height: $u-car-keyboard-button-height;
               border-radius: $u-car-keyboard-button-border-radius;

               &__text {
                  font-size: $u-car-keyboard-button-text-font-size;
                  color: $u-car-keyboard-button-text-color;
               }
            }

            &__left,
            &__right {
               border-radius: $u-car-keyboard-button-border-radius;
               width: $u-car-keyboard-special-button-width;
               height: $u-car-keyboard-button-height;
               background-color: $u-car-keyboard-u-hover-class-background-color;
               @include flex;
               justify-content: center;
               align-items: center;
               box-shadow: $u-car-keyboard-button-inner-box-shadow;
            }

            &__left {
               &__line {
                  font-size: $u-car-keyboard-line-font-size;
                  color: $u-car-keyboard-line-color;
                  margin: $u-car-keyboard-line-margin;
               }

               &__lang {
                  font-size: $u-car-keyboard-lang-font-size;
                  color: $u-car-keyboard-lang-color;

                  &--active {
                     color: $u-car-keyboard-active-color;
                  }
               }
            }
         }
      }
   }

   .u-hover-class {
      background-color: $u-car-keyboard-u-hover-class-background-color;
   }
</style>