uview-ultra 4.5.46

package/components/up-car-keyboard/props.uts

@@ -0,0 +1,27 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2025-12-17 08:48:27
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-17 08:48:27
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './carKeyboard.uts'
+
+let keyboardProp = defProps['carKeyboard'] as UTSJSONObject
+
+export const propsCarKeyboard = defineMixin({
+	props: {
+		// 是否打乱键盘的顺序
+		random: {
+			type: Boolean,
+			default: keyboardProp['random']
+		},
+		// 是否自动切换到英文
+		autoChange: {
+			type: Boolean,
+			default: keyboardProp['autoChange']
+		}
+	}
+});

package/components/up-car-keyboard/up-car-keyboard.uvue

@@ -0,0 +1,369 @@
+<template>
+	<view
+		class="up-keyboard"
+		@touchmove.stop.prevent="noop"
+	>
+		<view
+			v-for="(group, i) in abc ? engKeyBoardList : areaList"
+			:key="i"
+			class="up-keyboard__button"
+			:index="i"
+			:class="[((i + 1) == 4) ? 'up-keyboard__button--center' : '']"
+		>
+			<view
+				v-if="i == 3"
+				class="up-keyboard__button__inner-wrapper"
+			>
+				<view
+					class="up-keyboard__button__inner-wrapper__left"
+					hover-class="up-hover-class"
+					:hover-stay-time="200"
+					@tap="changeCarInputMode"
+				>
+					<text
+						class="up-keyboard__button__inner-wrapper__left__lang"
+						:class="[!abc ? 'up-keyboard__button__inner-wrapper__left__lang--active' : '']"
+					>中</text>
+					<text class="up-keyboard__button__inner-wrapper__left__line">/</text>
+					<text
+						class="up-keyboard__button__inner-wrapper__left__lang"
+						:class="[abc ? 'up-keyboard__button__inner-wrapper__left__lang--active' : '']"
+					>英</text>
+				</view>
+			</view>
+			<view
+				class="up-keyboard__button__inner-wrapper"
+				v-for="(item, j) in group"
+				:key="j"
+			>
+				<view
+					class="up-keyboard__button__inner-wrapper__inner"
+					:hover-stay-time="200"
+					@tap="carInputClick(i, j)"
+					hover-class="up-hover-class"
+				>
+					<text class="up-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
+				</view>
+			</view>
+			<view
+				v-if="i == 3"
+				@tap="backspaceClick"
+				@touchstart="backspaceTouchStart"
+				@touchend="clearTimer"
+				class="up-keyboard__button__inner-wrapper"
+			>
+				<view
+					class="up-keyboard__button__inner-wrapper__right"
+					hover-class="up-hover-class"
+					:hover-stay-time="200"
+				>
+					<up-icon
+						size="28"
+						name="backspace"
+						color="#303133"
+					></up-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import type { PropType } from 'vue'
+import { computed, ref } from 'vue'
+import { useUltraUI } from '../../libs/composable/useUltraUI';
+import { randomArray, sleep } from '../../libs/function/index';
+import defProps from './carKeyboard.uts'
+
+// options
+defineOptions({
+  styleIsolation: 'app-and-page',
+  name: "up-car-keyboard"
+})
+
+// props
+const props = defineProps({
+    customStyle: {
+        type: [Object, String],
+        default: () => ({})
+    },
+    customClass: {
+        type: String,
+        default: ''
+    },
+    url: {
+        type: String,
+        default: ''
+    },
+    linkType: {
+        type: String,
+        default: 'navigateTo'
+    },
+  // 是否打乱键盘的顺序
+  random: {
+    type: Boolean,
+    default: defProps.getBoolean('carKeyboard.random')
+  },
+  // 是否自动切换到英文
+  autoChange: {
+    type: Boolean,
+    default: defProps.getBoolean('carKeyboard.autoChange')
+  }
+})
+
+// 定义事件
+const emit = defineEmits(['change', 'backspace'])
+
+// 响应式数据
+const abc = ref(false)  // 车牌输入时，abc=true为输入车牌号码，abc=false为输入省份中文简称
+const timer = ref<number|null>(null)
+
+// 计算属性 - 中文车牌区域列表
+const areaList = computed<any[][]>(() => {
+  let data: any[] = [
+    '京',
+    '沪',
+    '粤',
+    '津',
+    '冀',
+    '豫',
+    '云',
+    '辽',
+    '黑',
+    '湘',
+    '皖',
+    '鲁',
+    '苏',
+    '浙',
+    '赣',
+    '鄂',
+    '桂',
+    '甘',
+    '晋',
+    '陕',
+    '蒙',
+    '吉',
+    '闽',
+    '贵',
+    '渝',
+    '川',
+    '青',
+    '琼',
+    '宁',
+    '挂',
+    '藏',
+    '港',
+    '澳',
+    '新',
+    '使',
+    '学',
+    '警'
+  ];
+  let tmp: any[][] = [];
+  // 打乱顺序
+  if (props.random) data = randomArray(data);
+  // 切割成二维数组
+  tmp.push(data.slice(0, 10));
+  tmp.push(data.slice(10, 20));
+  tmp.push(data.slice(20, 30));
+  tmp.push(data.slice(30, 37));
+  return tmp;
+});
+
+// 计算属性 - 英文车牌键盘列表
+const engKeyBoardList = computed<(string|number)[][]>(() => {
+  let data: (string|number)[] = [
+    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: (string|number)[][] = [];
+  if (props.random) data = randomArray(data);
+  tmp.push(data.slice(0, 10));
+  tmp.push(data.slice(10, 20));
+  tmp.push(data.slice(20, 30));
+  tmp.push(data.slice(30, 36));
+  return tmp;
+});
+
+// 点击键盘按钮
+const carInputClick = (i: number, j: number): void => {
+  let value: string|number = '';
+  // 不同模式，获取不同数组的值
+  if (abc.value) {
+    value = engKeyBoardList.value[i][j];
+  } else {
+    value = areaList.value[i][j];
+  }
+  // 如果允许自动切换，则将中文状态切换为英文
+  if (!abc.value && props.autoChange) {
+    sleep(200).then(() => {
+      abc.value = true;
+    });
+  }
+  emit('change', value);
+};
+
+// 修改汽车牌键盘的输入模式，中文|英文
+const changeCarInputMode = (): void => {
+  abc.value = !abc.value;
+};
+
+// 点击退格键，PC端浏览器(如电脑版微信内置浏览器)只有鼠标事件不触发touch，故由tap触发删除
+const backspaceClick = (): void => {
+  emit('backspace');
+};
+
+// 触摸退格键，一定时间后进入长按连续删除状态，短按时会在touchend前被清除
+const backspaceTouchStart = (): void => {
+  clearTimer(); //再次清空定时器，防止重复注册定时器
+  timer.value = setTimeout(() => {
+    emit('backspace');
+    backspaceLongPress();
+  }, 600);
+};
+
+// 长按状态下每隔一段时间删除一次
+const backspaceLongPress = (): void => {
+  clearTimer();
+  timer.value = setTimeout(() => {
+    emit('backspace');
+    backspaceLongPress();
+  }, 250);
+};
+
+// 清除定时器
+const clearTimer = (): void => {
+  clearTimeout(timer.value ?? 0);
+  timer.value = null;
+};
+
+// 空函数，阻止默认行为
+const noop = (): void => {};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-car-keyboard-background-color: rgb(224, 228, 230) !default;
+	$up-car-keyboard-padding:6px 0 6px !default;
+	$up-car-keyboard-button-inner-width:64rpx !default;
+	$up-car-keyboard-button-inner-background-color:#FFFFFF !default;
+	$up-car-keyboard-button-height:80rpx !default;
+	$up-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
+	$up-car-keyboard-button-border-radius:4px !default;
+	$up-car-keyboard-button-inner-margin:8rpx 5rpx !default;
+	$up-car-keyboard-button-text-font-size:16px !default;
+	$up-car-keyboard-button-text-color:$up-main-color !default;
+	$up-car-keyboard-center-inner-margin: 0 4rpx !default;
+	$up-car-keyboard-special-button-width:134rpx !default;
+	$up-car-keyboard-lang-font-size:16px !default;
+	$up-car-keyboard-lang-color:$up-main-color !default;
+	$up-car-keyboard-active-color:$up-primary !default;
+	$up-car-keyboard-line-font-size:15px !default;
+	$up-car-keyboard-line-color:$up-main-color !default;
+	$up-car-keyboard-line-margin:0 1px !default;
+	$up-car-keyboard-up-hover-class-background-color:#BBBCC6 !default;
+
+	.up-keyboard {
+		@include flex(column);
+		justify-content: space-around;
+		background-color: $up-car-keyboard-background-color;
+		align-items: stretch;
+		padding: $up-car-keyboard-padding;
+
+		&__button {
+			@include flex;
+			justify-content: center;
+			flex: 1;
+			/* #ifndef APP-NVUE */
+			/* #endif */
+
+			&__inner-wrapper {
+				box-shadow: $up-car-keyboard-button-inner-box-shadow;
+				margin: $up-car-keyboard-button-inner-margin;
+				border-radius: $up-car-keyboard-button-border-radius;
+
+				&__inner {
+					@include flex;
+					justify-content: center;
+					align-items: center;
+					width: $up-car-keyboard-button-inner-width;
+					background-color: $up-car-keyboard-button-inner-background-color;
+					height: $up-car-keyboard-button-height;
+					border-radius: $up-car-keyboard-button-border-radius;
+
+					&__text {
+						font-size: $up-car-keyboard-button-text-font-size;
+						color: $up-car-keyboard-button-text-color;
+					}
+				}
+
+				&__left,
+				&__right {
+					border-radius: $up-car-keyboard-button-border-radius;
+					width: $up-car-keyboard-special-button-width;
+					height: $up-car-keyboard-button-height;
+					background-color: $up-car-keyboard-up-hover-class-background-color;
+					@include flex;
+					justify-content: center;
+					align-items: center;
+					box-shadow: $up-car-keyboard-button-inner-box-shadow;
+				}
+
+				&__left {
+					&__line {
+						font-size: $up-car-keyboard-line-font-size;
+						color: $up-car-keyboard-line-color;
+						margin: $up-car-keyboard-line-margin;
+					}
+
+					&__lang {
+						font-size: $up-car-keyboard-lang-font-size;
+						color: $up-car-keyboard-lang-color;
+
+						&--active {
+							color: $up-car-keyboard-active-color;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.up-hover-class {
+		background-color: $up-car-keyboard-up-hover-class-background-color;
+	}
+</style>