bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,196 @@
<template>
   <view
      class="u-keyboard"
      @touchmove.stop.prevent="noop"
   >
      <view
         class="u-keyboard__button-wrapper"
         v-for="(item, index) in numList"
         :key="index"
      >
         <view
            class="u-keyboard__button-wrapper__button"
            :style="[itemStyle(index)]"
            @tap="keyboardClick(item)"
            hover-class="u-hover-class"
            :hover-stay-time="200"
         >
            <text class="u-keyboard__button-wrapper__button__text">{{ item }}</text>
         </view>
      </view>
      <view
         class="u-keyboard__button-wrapper"
      >
         <view
            class="u-keyboard__button-wrapper__button u-keyboard__button-wrapper__button--gray"
            hover-class="u-hover-class"
            :hover-stay-time="200"
            @touchstart.stop="backspaceClick"
            @touchend="clearTimer"
         >
            <u-icon
               name="backspace"
               color="#303133"
               size="28"
            ></u-icon>
         </view>
      </view>
   </view>
</template>

<script>
   import props from './props.js';

   /**
    * keyboard é”®ç›˜ç»„件
    * @description
    * @tutorial
    * @property {String}   mode      é”®ç›˜çš„类型，number-数字键盘，card-身份证键盘
    * @property {Boolean}   dotDisabled   æ˜¯å¦æ˜¾ç¤ºé”®ç›˜çš„"."符号
    * @property {Boolean}   random      æ˜¯å¦æ‰“乱键盘按键的顺序
    * @event {Function} change      ç‚¹å‡»é”®ç›˜è§¦å‘
    * @event {Function} backspace   ç‚¹å‡»é€€æ ¼é”®è§¦å‘
    * @example
    */
   export default {
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            backspace: 'backspace', // é€€æ ¼é”®å†…容
            dot: '.', // ç‚¹
            timer: null, // é•¿æŒ‰å¤šæ¬¡åˆ é™¤çš„事件监听
            cardX: 'X' // èº«ä»½è¯çš„X符号
         };
      },
      computed: {
         // é”®ç›˜éœ€è¦æ˜¾ç¤ºçš„内容
         numList() {
            let tmp = [];
            if (this.dotDisabled && this.mode == 'number') {
               if (!this.random) {
                  return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
               } else {
                  return uni.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
               }
            } else if (!this.dotDisabled && this.mode == 'number') {
               if (!this.random) {
                  return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
               } else {
                  return uni.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
               }
            } else if (this.mode == 'card') {
               if (!this.random) {
                  return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
               } else {
                  return uni.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
               }
            }
         },
         // æŒ‰é”®çš„样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
         itemStyle() {
            return index => {
               let style = {};
               if (this.mode == 'number' && this.dotDisabled && index == 9) style.width = '464rpx';
               return style;
            };
         },
         // æ˜¯å¦è®©æŒ‰é”®æ˜¾ç¤ºç°è‰²ï¼Œåªåœ¨éžä¹±åº&&数字键盘&&且允许点按键的时候
         btnBgGray() {
            return index => {
               if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && !this
                     .dotDisabled))) return true;
               else return false;
            };
         },
      },
      created() {

      },
      methods: {
         // ç‚¹å‡»é€€æ ¼é”®
         backspaceClick() {
            this.$emit('backspace');
            clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
            this.timer = null;
            this.timer = setInterval(() => {
               this.$emit('backspace');
            }, 250);
         },
         clearTimer() {
            clearInterval(this.timer);
            this.timer = null;
         },
         // èŽ·å–键盘显示的内容
         keyboardClick(val) {
            // å…è®¸é”®ç›˜æ˜¾ç¤ºç‚¹æ¨¡å¼å’Œè§¦å‘非点按键时，将内容转为数字类型
            if (!this.dotDisabled && val != this.dot && val != this.cardX) val = Number(val);
            this.$emit('change', val);
         }
      }
   };
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";
   $u-number-keyboard-background-color:rgb(224, 228, 230) !default;
   $u-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
   $u-number-keyboard-button-width:222rpx !default;
   $u-number-keyboard-button-margin:4px 6rpx !default;
   $u-number-keyboard-button-border-top-left-radius:4px !default;
   $u-number-keyboard-button-border-top-right-radius:4px !default;
   $u-number-keyboard-button-border-bottom-left-radius:4px !default;
   $u-number-keyboard-button-border-bottom-right-radius:4px !default;
   $u-number-keyboard-button-height: 90rpx!default;
   $u-number-keyboard-button-background-color:#FFFFFF !default;
   $u-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
   $u-number-keyboard-text-font-size:20px !default;
   $u-number-keyboard-text-font-weight:500 !default;
   $u-number-keyboard-text-color:$u-main-color !default;
   $u-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
   $u-number-keyboard-u-hover-class-background-color: #BBBCC6 !default;

   .u-keyboard {
      @include flex;
      flex-direction: row;
      justify-content: space-around;
      background-color: $u-number-keyboard-background-color;
      flex-wrap: wrap;
      padding: $u-number-keyboard-padding;

      &__button-wrapper {
         box-shadow: $u-number-keyboard-button-box-shadow;
         margin: $u-number-keyboard-button-margin;
         border-top-left-radius: $u-number-keyboard-button-border-top-left-radius;
         border-top-right-radius: $u-number-keyboard-button-border-top-right-radius;
         border-bottom-left-radius: $u-number-keyboard-button-border-bottom-left-radius;
         border-bottom-right-radius: $u-number-keyboard-button-border-bottom-right-radius;

         &__button {
            width: $u-number-keyboard-button-width;
            height: $u-number-keyboard-button-height;
            background-color: $u-number-keyboard-button-background-color;
            @include flex;
            justify-content: center;
            align-items: center;
            border-top-left-radius: $u-number-keyboard-button-border-top-left-radius;
            border-top-right-radius: $u-number-keyboard-button-border-top-right-radius;
            border-bottom-left-radius: $u-number-keyboard-button-border-bottom-left-radius;
            border-bottom-right-radius: $u-number-keyboard-button-border-bottom-right-radius;

            &__text {
               font-size: $u-number-keyboard-text-font-size;
               font-weight: $u-number-keyboard-text-font-weight;
               color: $u-number-keyboard-text-color;
            }

            &--gray {
               background-color: $u-number-keyboard-gray-background-color;
            }
         }
      }
   }

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