@didaoktv/didaoui-uniapp 1.3.5 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -26,48 +26,66 @@
|
|
|
26
26
|
</view>
|
|
27
27
|
</view>
|
|
28
28
|
|
|
29
|
-
<!--
|
|
30
|
-
<
|
|
31
|
-
v-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
<!-- 键盘弹层：与其他键盘模式一致，经 dd-popup 弹出（遮罩/动效/底部安全区），0 位省份键盘，其余位字母数字键盘（按位锁键） -->
|
|
30
|
+
<dd-popup
|
|
31
|
+
v-model="popupShow"
|
|
32
|
+
position="bottom"
|
|
33
|
+
:z-index="zIndexConfig.popup"
|
|
34
34
|
>
|
|
35
|
-
<view class="dd-car-
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
class="dd-car-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<text class="dd-car-keyboard__key-text">{{ item.label }}</text>
|
|
35
|
+
<view class="dd-car-keyboard__panel">
|
|
36
|
+
<view class="dd-car-keyboard__tooltip">
|
|
37
|
+
<view hover-class="dd-car-keyboard__hover" :hover-stay-time="100">
|
|
38
|
+
<text
|
|
39
|
+
class="dd-car-keyboard__tooltip-item dd-car-keyboard__tooltip-item--cancel"
|
|
40
|
+
@tap="closeKeyboard"
|
|
41
|
+
>取消</text>
|
|
42
|
+
</view>
|
|
43
|
+
<view>
|
|
44
|
+
<text class="dd-car-keyboard__tooltip-item dd-car-keyboard__tooltip-item--tips">车牌键盘</text>
|
|
45
|
+
</view>
|
|
46
|
+
<view hover-class="dd-car-keyboard__hover" :hover-stay-time="100">
|
|
47
|
+
<text
|
|
48
|
+
class="dd-car-keyboard__tooltip-item dd-car-keyboard__tooltip-item--submit"
|
|
49
|
+
@tap="closeKeyboard"
|
|
50
|
+
>完成</text>
|
|
51
|
+
</view>
|
|
53
52
|
</view>
|
|
54
53
|
<view
|
|
55
|
-
v-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
:hover-stay-time="100"
|
|
59
|
-
@tap="onBackspaceTap"
|
|
54
|
+
v-for="(row, rowIndex) in keyRows"
|
|
55
|
+
:key="rowIndex"
|
|
56
|
+
class="dd-car-keyboard__row"
|
|
60
57
|
>
|
|
61
|
-
<
|
|
58
|
+
<view
|
|
59
|
+
v-for="item in row"
|
|
60
|
+
:key="item.label"
|
|
61
|
+
class="dd-car-keyboard__key"
|
|
62
|
+
:class="[item.locked && 'dd-car-keyboard__key--lock']"
|
|
63
|
+
hover-class="dd-car-keyboard__key--hover"
|
|
64
|
+
:hover-stay-time="100"
|
|
65
|
+
@tap="onKeyTap(item)"
|
|
66
|
+
>
|
|
67
|
+
<text class="dd-car-keyboard__key-text">{{ item.label }}</text>
|
|
68
|
+
</view>
|
|
69
|
+
<view
|
|
70
|
+
v-if="rowIndex === 3"
|
|
71
|
+
class="dd-car-keyboard__key dd-car-keyboard__key--del"
|
|
72
|
+
hover-class="dd-car-keyboard__key--hover"
|
|
73
|
+
:hover-stay-time="100"
|
|
74
|
+
@tap="onBackspaceTap"
|
|
75
|
+
>
|
|
76
|
+
<dd-icon size="22" name="backspace"></dd-icon>
|
|
77
|
+
</view>
|
|
62
78
|
</view>
|
|
63
79
|
</view>
|
|
64
|
-
</
|
|
80
|
+
</dd-popup>
|
|
65
81
|
</view>
|
|
66
82
|
</template>
|
|
67
83
|
|
|
68
84
|
<script setup lang="ts">
|
|
69
85
|
import { computed, ref, watch } from 'vue'
|
|
86
|
+
import zIndexConfig from '../../libs/config/zIndex.js'
|
|
70
87
|
import DdIcon from '../dd-icon/dd-icon.vue'
|
|
88
|
+
import DdPopup from '../dd-popup/dd-popup.vue'
|
|
71
89
|
import { MAX_LEN, getKeyRows, nextPos, type KeyItem } from './carPlate'
|
|
72
90
|
|
|
73
91
|
/**
|
|
@@ -76,7 +94,7 @@ import { MAX_LEN, getKeyRows, nextPos, type KeyItem } from './carPlate'
|
|
|
76
94
|
* @property {String} modelValue 车牌号（v-model）
|
|
77
95
|
* @event {Function} update:modelValue 输入变化
|
|
78
96
|
* @event {Function} focus 键盘弹出
|
|
79
|
-
* @event {Function} blur
|
|
97
|
+
* @event {Function} blur 键盘收起（含遮罩/取消/完成触发）
|
|
80
98
|
* @example <dd-car-keyboard v-model="plateNo" />
|
|
81
99
|
*/
|
|
82
100
|
|
|
@@ -120,7 +138,13 @@ watch(keyboardVisible, (visible) => {
|
|
|
120
138
|
else emit('blur', props.modelValue)
|
|
121
139
|
})
|
|
122
140
|
|
|
123
|
-
|
|
141
|
+
// dd-popup 关闭路径（遮罩/取消/完成）统一经 update:modelValue 收敛回 active
|
|
142
|
+
const popupShow = computed({
|
|
143
|
+
get: () => active.value >= 0,
|
|
144
|
+
set: (val: boolean) => {
|
|
145
|
+
if (!val) active.value = -1
|
|
146
|
+
}
|
|
147
|
+
})
|
|
124
148
|
|
|
125
149
|
function onBoxTap(index: number) {
|
|
126
150
|
active.value = index
|
|
@@ -219,25 +243,40 @@ $dd-car-keyboard-panel-padding: 0 var(--dd-space-2, #{$dd-space-2}) var(--dd-spa
|
|
|
219
243
|
}
|
|
220
244
|
|
|
221
245
|
&__panel {
|
|
222
|
-
position: fixed;
|
|
223
|
-
right: 0;
|
|
224
|
-
bottom: 0;
|
|
225
|
-
left: 0;
|
|
226
|
-
z-index: 10075; // ponytail: 取 libs/config/zIndex.js popup 值，模板内不能用表达式故字面量
|
|
227
|
-
background-color: var(--dd-bg-section, #{$dd-bg-section});
|
|
228
246
|
padding: $dd-car-keyboard-panel-padding;
|
|
229
247
|
}
|
|
230
248
|
|
|
231
|
-
|
|
249
|
+
// 工具条对齐 dd-keyboard：取消 / 提示 / 完成
|
|
250
|
+
&__tooltip {
|
|
232
251
|
@include flex;
|
|
233
|
-
justify-content:
|
|
234
|
-
|
|
252
|
+
justify-content: space-between;
|
|
253
|
+
background-color: var(--dd-bg-elevated, #{$dd-bg-elevated});
|
|
254
|
+
padding: 14px 12px;
|
|
255
|
+
|
|
256
|
+
&-item {
|
|
257
|
+
color: var(--dd-text-primary, #{$dd-text-primary});
|
|
258
|
+
flex: 1;
|
|
259
|
+
text-align: center;
|
|
260
|
+
font-size: 15px;
|
|
261
|
+
|
|
262
|
+
&--cancel {
|
|
263
|
+
text-align: left;
|
|
264
|
+
color: var(--dd-text-tertiary, #{$dd-text-tertiary});
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
&--tips {
|
|
268
|
+
color: var(--dd-text-tertiary, #{$dd-text-tertiary});
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
&--submit {
|
|
272
|
+
text-align: right;
|
|
273
|
+
color: var(--dd-primary-400, #{$dd-primary-400});
|
|
274
|
+
}
|
|
275
|
+
}
|
|
235
276
|
}
|
|
236
277
|
|
|
237
|
-
&
|
|
238
|
-
|
|
239
|
-
font-size: 13.5px;
|
|
240
|
-
color: var(--dd-text-secondary, #{$dd-text-secondary});
|
|
278
|
+
&__hover {
|
|
279
|
+
opacity: 0.7;
|
|
241
280
|
}
|
|
242
281
|
|
|
243
282
|
&__row {
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
>
|
|
11
11
|
<view
|
|
12
12
|
class="dd-keyboard__button-wrapper__button"
|
|
13
|
+
:class="[btnBgGray(index) && 'dd-keyboard__button-wrapper__button--gray']"
|
|
13
14
|
:style="[itemStyle(index)]"
|
|
14
15
|
@tap="keyboardClick(item)"
|
|
15
16
|
hover-class="dd-keyboard-hover"
|
|
@@ -25,8 +26,10 @@
|
|
|
25
26
|
class="dd-keyboard__button-wrapper__button dd-keyboard__button-wrapper__button--gray"
|
|
26
27
|
hover-class="dd-keyboard-hover"
|
|
27
28
|
:hover-stay-time="200"
|
|
28
|
-
@touchstart.stop="
|
|
29
|
+
@touchstart.stop="backspaceTouchStart"
|
|
29
30
|
@touchend="clearTimer"
|
|
31
|
+
@touchcancel="clearTimer"
|
|
32
|
+
@tap="backspaceTap"
|
|
30
33
|
>
|
|
31
34
|
<dd-icon
|
|
32
35
|
name="backspace"
|
|
@@ -61,6 +64,7 @@
|
|
|
61
64
|
backspace: 'backspace', // 退格键内容
|
|
62
65
|
dot: '.', // 点
|
|
63
66
|
timer: null, // 长按多次删除的事件监听
|
|
67
|
+
isTouch: false, // 本次退格是否来自触摸（防 tap 重复删除）
|
|
64
68
|
cardX: 'X' // 身份证的X符号
|
|
65
69
|
};
|
|
66
70
|
},
|
|
@@ -88,15 +92,15 @@
|
|
|
88
92
|
}
|
|
89
93
|
}
|
|
90
94
|
},
|
|
91
|
-
// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9
|
|
95
|
+
// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，"0"键占位两个空间（flex 拉伸为 2 倍宽）
|
|
92
96
|
itemStyle() {
|
|
93
97
|
return index => {
|
|
94
98
|
let style = {};
|
|
95
|
-
if (this.mode == 'number' && this.dotDisabled && index == 9) style.
|
|
99
|
+
if (this.mode == 'number' && this.dotDisabled && index == 9) style.flex = '2 1 30%';
|
|
96
100
|
return style;
|
|
97
101
|
};
|
|
98
102
|
},
|
|
99
|
-
//
|
|
103
|
+
// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候（"."键 / 身份证"X"键）
|
|
100
104
|
btnBgGray() {
|
|
101
105
|
return index => {
|
|
102
106
|
if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && !this
|
|
@@ -109,8 +113,9 @@
|
|
|
109
113
|
},
|
|
110
114
|
emits: ["backspace", "change"],
|
|
111
115
|
methods: {
|
|
112
|
-
//
|
|
113
|
-
|
|
116
|
+
// 点击退格键（触摸路径：touchstart 立删 + 长按连删；鼠标路径：tap 单删，isTouch 防移动端触摸后 tap 二次删除）
|
|
117
|
+
backspaceTouchStart() {
|
|
118
|
+
this.isTouch = true
|
|
114
119
|
this.$emit('backspace');
|
|
115
120
|
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
|
|
116
121
|
this.timer = null;
|
|
@@ -118,6 +123,13 @@
|
|
|
118
123
|
this.$emit('backspace');
|
|
119
124
|
}, 250);
|
|
120
125
|
},
|
|
126
|
+
backspaceTap() {
|
|
127
|
+
if (this.isTouch) {
|
|
128
|
+
this.isTouch = false;
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
this.$emit('backspace');
|
|
132
|
+
},
|
|
121
133
|
clearTimer() {
|
|
122
134
|
clearInterval(this.timer);
|
|
123
135
|
this.timer = null;
|
|
@@ -137,12 +149,8 @@
|
|
|
137
149
|
@import '../../scss/dd-shared';
|
|
138
150
|
$dd-number-keyboard-background-color: var(--dd-bg-section, #{$dd-bg-section}) !default;
|
|
139
151
|
$dd-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
|
|
140
|
-
$dd-number-keyboard-
|
|
141
|
-
$dd-number-keyboard-button-
|
|
142
|
-
$dd-number-keyboard-button-border-top-left-radius:4px !default;
|
|
143
|
-
$dd-number-keyboard-button-border-top-right-radius:4px !default;
|
|
144
|
-
$dd-number-keyboard-button-border-bottom-left-radius:4px !default;
|
|
145
|
-
$dd-number-keyboard-button-border-bottom-right-radius:4px !default;
|
|
152
|
+
$dd-number-keyboard-gap:6rpx !default;
|
|
153
|
+
$dd-number-keyboard-button-border-radius:var(--dd-radius-sm, #{$dd-radius-sm}) !default;
|
|
146
154
|
$dd-number-keyboard-button-height: 90rpx!default;
|
|
147
155
|
$dd-number-keyboard-button-background-color:var(--dd-surface-container-high, #{$dd-surface-container-high}) !default;
|
|
148
156
|
$dd-number-keyboard-button-box-shadow:0 2px 0px var(--dd-bg, #{$dd-bg}) !default;
|
|
@@ -155,30 +163,25 @@
|
|
|
155
163
|
.dd-keyboard {
|
|
156
164
|
@include flex;
|
|
157
165
|
flex-direction: row;
|
|
158
|
-
justify-content: space-around;
|
|
159
|
-
background-color: $dd-number-keyboard-background-color;
|
|
160
166
|
flex-wrap: wrap;
|
|
167
|
+
gap: $dd-number-keyboard-gap;
|
|
168
|
+
background-color: $dd-number-keyboard-background-color;
|
|
161
169
|
padding: $dd-number-keyboard-padding;
|
|
162
170
|
|
|
171
|
+
// ponytail: 弹性三等分替代固定 222rpx 宽——容器宽度不足 702rpx 时固定宽会挤成 2 列
|
|
163
172
|
&__button-wrapper {
|
|
173
|
+
flex: 1 1 30%;
|
|
164
174
|
box-shadow: $dd-number-keyboard-button-box-shadow;
|
|
165
|
-
|
|
166
|
-
border-top-left-radius: $dd-number-keyboard-button-border-top-left-radius;
|
|
167
|
-
border-top-right-radius: $dd-number-keyboard-button-border-top-right-radius;
|
|
168
|
-
border-bottom-left-radius: $dd-number-keyboard-button-border-bottom-left-radius;
|
|
169
|
-
border-bottom-right-radius: $dd-number-keyboard-button-border-bottom-right-radius;
|
|
175
|
+
border-radius: $dd-number-keyboard-button-border-radius;
|
|
170
176
|
|
|
171
177
|
&__button {
|
|
172
|
-
width:
|
|
178
|
+
width: 100%;
|
|
173
179
|
height: $dd-number-keyboard-button-height;
|
|
174
180
|
background-color: $dd-number-keyboard-button-background-color;
|
|
175
181
|
@include flex;
|
|
176
182
|
justify-content: center;
|
|
177
183
|
align-items: center;
|
|
178
|
-
border-
|
|
179
|
-
border-top-right-radius: $dd-number-keyboard-button-border-top-right-radius;
|
|
180
|
-
border-bottom-left-radius: $dd-number-keyboard-button-border-bottom-left-radius;
|
|
181
|
-
border-bottom-right-radius: $dd-number-keyboard-button-border-bottom-right-radius;
|
|
184
|
+
border-radius: $dd-number-keyboard-button-border-radius;
|
|
182
185
|
|
|
183
186
|
&__text {
|
|
184
187
|
font-size: $dd-number-keyboard-text-font-size;
|
|
@@ -187,9 +190,9 @@
|
|
|
187
190
|
}
|
|
188
191
|
|
|
189
192
|
&--gray {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
+
background-color: $dd-number-keyboard-gray-background-color;
|
|
194
|
+
color: $dd-number-keyboard-text-color; // 退格图标 color=inherit，由此处控制
|
|
195
|
+
}
|
|
193
196
|
}
|
|
194
197
|
}
|
|
195
198
|
}
|