From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-car-keyboard/u-car-keyboard.vue | 257 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 257 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-car-keyboard/u-car-keyboard.vue b/uview-ui/components/u-car-keyboard/u-car-keyboard.vue
new file mode 100644
index 0000000..84b1467
--- /dev/null
+++ b/uview-ui/components/u-car-keyboard/u-car-keyboard.vue
@@ -0,0 +1,257 @@
+<template>
+ <view class="u-keyboard" @touchmove.stop.prevent="() => {}">
+ <view class="u-keyboard-grids">
+ <block>
+ <view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
+ <view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn"
+ v-for="(item, j) in group" :key="j">
+ {{ item }}
+ </view>
+ </view>
+ <view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back"
+ hover-class="u-hover-class">
+ <u-icon :size="38" name="backspace" :bold="true"></u-icon>
+ </view>
+ <view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
+ <text class="zh" :class="[!abc ? 'active' : 'inactive']">涓�</text>
+ /
+ <text class="en" :class="[abc ? 'active' : 'inactive']">鑻�</text>
+ </view>
+ </block>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default {
+ name: "u-keyboard",
+ props: {
+ // 鏄惁鎵撲贡閿洏鎸夐敭鐨勯『搴�
+ random: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ // 杞︾墝杈撳叆鏃讹紝abc=true涓鸿緭鍏ヨ溅鐗屽彿鐮侊紝bac=false涓鸿緭鍏ョ渷浠戒腑鏂囩畝绉�
+ abc: false
+ };
+ },
+ computed: {
+ areaList() {
+ let data = [
+ '浜�',
+ '娌�',
+ '绮�',
+ '娲�',
+ '鍐�',
+ '璞�',
+ '浜�',
+ '杈�',
+ '榛�',
+ '婀�',
+ '鐨�',
+ '椴�',
+ '鑻�',
+ '娴�',
+ '璧�',
+ '閯�',
+ '妗�',
+ '鐢�',
+ '鏅�',
+ '闄�',
+ '钂�',
+ '鍚�',
+ '闂�',
+ '璐�',
+ '娓�',
+ '宸�',
+ '闈�',
+ '鐞�',
+ '瀹�',
+ '鎸�',
+ '钘�',
+ '娓�',
+ '婢�',
+ '鏂�',
+ '浣�',
+ '瀛�'
+ ];
+ let tmp = [];
+ // 鎵撲贡椤哄簭
+ if (this.random) data = this.$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 = this.$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];
+ 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/style.components.scss";
+
+ .u-keyboard-grids {
+ background: rgb(215, 215, 217);
+ padding: 24rpx 0;
+ position: relative;
+ }
+
+ .u-keyboard-grids-item {
+ @include vue-flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .u-keyboard-grids-btn {
+ text-decoration: none;
+ width: 62rpx;
+ flex: 0 0 64rpx;
+ height: 80rpx;
+ /* #ifndef APP-NVUE */
+ display: inline-flex;
+ /* #endif */
+ font-size: 36rpx;
+ text-align: center;
+ line-height: 80rpx;
+ background-color: #fff;
+ margin: 8rpx 5rpx;
+ border-radius: 8rpx;
+ box-shadow: 0 2rpx 0rpx #888992;
+ font-weight: 500;
+ justify-content: center;
+ }
+
+ .u-carinput-hover {
+ background-color: rgb(185, 188, 195) !important;
+ }
+
+ .u-keyboard-back {
+ position: absolute;
+ width: 96rpx;
+ right: 22rpx;
+ bottom: 32rpx;
+ height: 80rpx;
+ background-color: rgb(185, 188, 195);
+ @include vue-flex;
+ align-items: center;
+ border-radius: 8rpx;
+ justify-content: center;
+ box-shadow: 0 2rpx 0rpx #888992;
+ }
+
+ .u-keyboard-change {
+ font-size: 24rpx;
+ box-shadow: 0 2rpx 0rpx #888992;
+ position: absolute;
+ width: 96rpx;
+ left: 22rpx;
+ line-height: 1;
+ bottom: 32rpx;
+ height: 80rpx;
+ background-color: #ffffff;
+ @include vue-flex;
+ align-items: center;
+ border-radius: 8rpx;
+ justify-content: center;
+ }
+
+ .u-keyboard-change .inactive.zh {
+ transform: scale(0.85) translateY(-10rpx);
+ }
+
+ .u-keyboard-change .inactive.en {
+ transform: scale(0.85) translateY(10rpx);
+ }
+
+ .u-keyboard-change .active {
+ color: rgb(237, 112, 64);
+ font-size: 30rpx;
+ }
+
+ .u-keyboard-change .zh {
+ transform: translateY(-10rpx);
+ }
+
+ .u-keyboard-change .en {
+ transform: translateY(10rpx);
+ }
+</style>
--
Gitblit v1.9.3