From 64b432916af9c9218ab3f3eca614e26c542142ae Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期二, 07 十一月 2023 15:47:13 +0800 Subject: [PATCH] bug --- minipro_standard/uni_modules/uview-ui/components/u-car-keyboard/u-car-keyboard.vue | 622 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 311 insertions(+), 311 deletions(-) diff --git a/minipro_standard/uni_modules/uview-ui/components/u-car-keyboard/u-car-keyboard.vue b/minipro_standard/uni_modules/uview-ui/components/u-car-keyboard/u-car-keyboard.vue index c5c729c..51175b5 100644 --- a/minipro_standard/uni_modules/uview-ui/components/u-car-keyboard/u-car-keyboard.vue +++ b/minipro_standard/uni_modules/uview-ui/components/u-car-keyboard/u-car-keyboard.vue @@ -1,311 +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> +<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> -- Gitblit v1.9.3