定位优化

quanyawei

2024-01-11 da25434b85fc5b4321c429bf95e719d00ec395bb

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

New file
@@ -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>