@didaoktv/didaoui-uniapp 1.0.0 → 1.2.0

package/components/dd-capsule-button/dd-capsule-button.vue

@@ -56,7 +56,7 @@ function onMenu() {
 // 微信小程序标准 87×32px → 174×64rpx (ponytail: 固定尺寸，H5 降级同样尺寸)
 .dd-capsule-button {
   width: 174rpx;
-  height: 64rpx;
+  height: $dd-size-button-sm;
   border-radius: $dd-radius-full;
   @include dd-glass;
   display: flex;
@@ -78,14 +78,14 @@ function onMenu() {
   &__arrow {
     width: 20rpx;
     height: 20rpx;
-    border-left: 4rpx solid $dd-text-secondary;
-    border-bottom: 4rpx solid $dd-text-secondary;
+    border-left: $dd-space-1 solid $dd-text-secondary;
+    border-bottom: $dd-space-1 solid $dd-text-secondary;
     transform: rotate(45deg);
-    margin-left: 4rpx;
+    margin-left: $dd-space-1;
   }
 
   &__dots {
-    font-size: 36rpx;
+    font-size: $dd-font-size-h3;
     line-height: 1;
     color: $dd-text-secondary;
   }
@@ -93,7 +93,7 @@ function onMenu() {
   // 1px 竖向分隔线，仅 default 变体
   &__divider {
     width: 1px;
-    height: 32rpx;
+    height: $dd-space-4;
     align-self: center;
     background: $dd-border-default;
     flex-shrink: 0;

package/components/dd-car-keyboard/carKeyboard.js

@@ -0,0 +1,6 @@
+export default {
+    // 车牌号键盘
+    carKeyboard: {
+        random: false
+    }
+}

package/components/dd-car-keyboard/dd-car-keyboard.vue

@@ -0,0 +1,315 @@
+<template>
+	<view
+		class="dd-keyboard"
+		@touchmove.stop.prevent="noop"
+	>
+		<view
+			v-for="(group, i) in abc ? engKeyBoardList : areaList"
+			:key="i"
+			class="dd-keyboard__button"
+			:index="i"
+			:class="[i + 1 === 4 && 'dd-keyboard__button--center']"
+		>
+			<view
+				v-if="i === 3"
+				class="dd-keyboard__button__inner-wrapper"
+			>
+				<view
+					class="dd-keyboard__button__inner-wrapper__left"
+					hover-class="dd-keyboard-hover"
+					:hover-stay-time="200"
+					@tap="changeCarInputMode"
+				>
+					<text
+						class="dd-keyboard__button__inner-wrapper__left__lang"
+						:class="[!abc && 'dd-keyboard__button__inner-wrapper__left__lang--active']"
+					>中</text>
+					<text class="dd-keyboard__button__inner-wrapper__left__line">/</text>
+					<text
+						class="dd-keyboard__button__inner-wrapper__left__lang"
+						:class="[abc && 'dd-keyboard__button__inner-wrapper__left__lang--active']"
+					>英</text>
+				</view>
+			</view>
+			<view
+				class="dd-keyboard__button__inner-wrapper"
+				v-for="(item, j) in group"
+				:key="j"
+			>
+				<view
+					class="dd-keyboard__button__inner-wrapper__inner"
+					:hover-stay-time="200"
+					@tap="carInputClick(i, j)"
+					hover-class="dd-keyboard-hover"
+				>
+					<text class="dd-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
+				</view>
+			</view>
+			<view
+				v-if="i === 3"
+				@touchstart="backspaceClick"
+				@touchend="clearTimer"
+				class="dd-keyboard__button__inner-wrapper"
+			>
+				<view
+					class="dd-keyboard__button__inner-wrapper__right"
+					hover-class="dd-keyboard-hover"
+					:hover-stay-time="200"
+				>
+					<dd-icon
+					size="28"
+					name="backspace"
+				></dd-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { randomArray, sleep } from '../../libs/function/index';
+	/**
+	 * keyboard 键盘组件
+	 * @description 自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
+	 * @property {Boolean} random 是否打乱键盘的顺序
+	 * @event {Function} change 点击键盘触发
+	 * @event {Function} backspace 点击退格键触发
+	 * @example <dd-keyboard ref="carKeyboard" mode="car" v-model="show"></dd-keyboard>
+	 */
+	export default {
+		name: "dd-car-keyboard",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
+				abc: false
+			};
+		},
+		computed: {
+			areaList() {
+				let data = [
+					'京',
+					'沪',
+					'粤',
+					'津',
+					'冀',
+					'豫',
+					'云',
+					'辽',
+					'黑',
+					'湘',
+					'皖',
+					'鲁',
+					'苏',
+					'浙',
+					'赣',
+					'鄂',
+					'桂',
+					'甘',
+					'晋',
+					'陕',
+					'蒙',
+					'吉',
+					'闽',
+					'贵',
+					'渝',
+					'川',
+					'青',
+					'琼',
+					'宁',
+					'挂',
+					'藏',
+					'港',
+					'澳',
+					'新',
+					'使',
+					'学'
+				];
+				let tmp = [];
+				// 打乱顺序
+				if (this.random) data = 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 = 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;
+			}
+		},
+		emits: ["change", "backspace"],
+		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) 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 '../../scss/variables';
+@import '../../scss/dd-shared';
+	$dd-car-keyboard-background-color: $dd-bg-section !default;
+	$dd-car-keyboard-padding:6px 0 6px !default;
+	$dd-car-keyboard-button-inner-width:64rpx !default;
+	$dd-car-keyboard-button-inner-background-color:$dd-surface-container-high !default;
+	$dd-car-keyboard-button-height:80rpx !default;
+	$dd-car-keyboard-button-inner-box-shadow:0 1px 0px $dd-bg !default;
+	$dd-car-keyboard-button-border-radius:4px !default;
+	$dd-car-keyboard-button-inner-margin:8rpx 5rpx !default;
+	$dd-car-keyboard-button-text-font-size:16px !default;
+	$dd-car-keyboard-button-text-color:$dd-text-primary !default;
+	$dd-car-keyboard-center-inner-margin: 0 4rpx !default;
+	$dd-car-keyboard-special-button-width:134rpx !default;
+	$dd-car-keyboard-lang-font-size:16px !default;
+	$dd-car-keyboard-lang-color:$dd-text-primary !default;
+	$dd-car-keyboard-active-color:$dd-primary-400 !default;
+	$dd-car-keyboard-line-font-size:15px !default;
+	$dd-car-keyboard-line-color:$dd-text-primary !default;
+	$dd-car-keyboard-line-margin:0 1px !default;
+	$dd-car-keyboard-dd-keyboard-hover-background-color:$dd-surface-hover !default;
+
+	.dd-keyboard {
+		@include flex(column);
+		justify-content: space-around;
+		background-color: $dd-car-keyboard-background-color;
+		align-items: stretch;
+		padding: $dd-car-keyboard-padding;
+
+		&__button {
+			@include flex;
+			justify-content: center;
+			flex: 1;
+			/* #ifndef APP-NVUE */
+			/* #endif */
+
+			&__inner-wrapper {
+				box-shadow: $dd-car-keyboard-button-inner-box-shadow;
+				margin: $dd-car-keyboard-button-inner-margin;
+				border-radius: $dd-car-keyboard-button-border-radius;
+
+				&__inner {
+					@include flex;
+					justify-content: center;
+					align-items: center;
+					width: $dd-car-keyboard-button-inner-width;
+					background-color: $dd-car-keyboard-button-inner-background-color;
+					height: $dd-car-keyboard-button-height;
+					border-radius: $dd-car-keyboard-button-border-radius;
+
+					&__text {
+						font-size: $dd-car-keyboard-button-text-font-size;
+						color: $dd-car-keyboard-button-text-color;
+					}
+				}
+
+				&__left,
+				&__right {
+					border-radius: $dd-car-keyboard-button-border-radius;
+					width: $dd-car-keyboard-special-button-width;
+					height: $dd-car-keyboard-button-height;
+					background-color: $dd-car-keyboard-dd-keyboard-hover-background-color;
+					color: $dd-car-keyboard-button-text-color; // 退格图标 color=inherit，由此处控制
+					@include flex;
+					justify-content: center;
+					align-items: center;
+					box-shadow: $dd-car-keyboard-button-inner-box-shadow;
+				}
+
+				&__left {
+					&__line {
+						font-size: $dd-car-keyboard-line-font-size;
+						color: $dd-car-keyboard-line-color;
+						margin: $dd-car-keyboard-line-margin;
+					}
+
+					&__lang {
+						font-size: $dd-car-keyboard-lang-font-size;
+						color: $dd-car-keyboard-lang-color;
+
+						&--active {
+							color: $dd-car-keyboard-active-color;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.dd-keyboard-hover {
+		background-color: $dd-car-keyboard-dd-keyboard-hover-background-color;
+	}
+</style>

package/components/dd-car-keyboard/props.js

@@ -0,0 +1,19 @@
+import { defineMixin } from '../../libs/vue'
+import CarKeyboardDefaultProps from './carKeyboard'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(CarKeyboardDefaultProps)
+export const props = defineMixin({
+    props: {
+        // 是否打乱键盘按键的顺序
+        random: {
+            type: Boolean,
+            default: false
+        },
+        // 输入一个中文后，是否自动切换到英文
+        autoChange: {
+            type: Boolean,
+            default: false
+        }
+    }
+})