Skip to content

Commit 22f2eac

Browse files
eiinueiinu
authored
feat(number-keyboard): 新增 confirm 事件 (#3059)
1 parent 499f576 commit 22f2eac

File tree

5 files changed

+67
-98
lines changed

5 files changed

+67
-98
lines changed

‎src/packages/__VUE/numberkeyboard/doc.en-US.md

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ app.use(NumberKeyboard)
6363
| delete | Emitted when the delete key is pressed | - |
6464
| close | Emitted when the close button or non-keyboard area is clicked is clicked | - |
6565
| blur | Emitted when the close button is clicked or the keyboard is blurred | - |
66+
| confirm `version` | Emitted when the confirm button is clicked | - |
6667

6768
## Theming
6869

‎src/packages/__VUE/numberkeyboard/doc.md

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ app.use(NumberKeyboard)
6262
| delete | 点击删除键时触发 | - |
6363
| close | 点击关闭按钮时触发 | - |
6464
| blur | 点击关闭按钮或非键盘区域时触发 | - |
65+
| confirm `version` | 点击确认按钮 | - |
6566

6667
## 主题定制
6768

‎src/packages/__VUE/numberkeyboard/doc.taro.md

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ app.use(NumberKeyboard)
6262
| input | 点击按键时触发 | 按键内容 |
6363
| delete | 点击删除键时触发 | - |
6464
| close | 点击关闭按钮或非键盘区域时触发 | - |
65+
| confirm `version` | 点击确认按钮 | - |
6566

6667
## 主题定制
6768

‎src/packages/__VUE/numberkeyboard/index.taro.vue

+32-50
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
<template>
2-
<nut-popup
3-
v-model:visible="show"
4-
position="bottom"
5-
:pop-class="popClass"
6-
:overlay="overlay"
7-
overlay-class="nut-number-keyboard-overlay"
8-
:lock-scroll="lockScroll"
9-
:catch-move="lockScroll"
10-
@click-overlay="closeBoard()"
11-
>
2+
<nut-popup v-model:visible="show" position="bottom" :pop-class="popClass" :overlay="overlay"
3+
overlay-class="nut-number-keyboard-overlay" :lock-scroll="lockScroll" :catch-move="lockScroll"
4+
@click-overlay="closeBoard()">
125
<div ref="root" class="nut-number-keyboard">
136
<div v-if="title" class="nut-number-keyboard__header">
147
<h3 class="nut-number-keyboard__title">{{ title }}</h3>
@@ -18,54 +11,38 @@
1811
</div>
1912
<div class="nut-number-keyboard__body">
2013
<div class="nut-number-keyboard__keys">
21-
<div
22-
v-for="item of keysList"
23-
:key="'key' + item.id"
24-
:class="[
25-
'nut-key__wrapper',
26-
{
27-
'nut-key__wrapper--wider':
28-
item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1
29-
}
30-
]"
31-
>
32-
<div
33-
:class="[
34-
'nut-key',
35-
{ 'nut-key--active': item.id == clickKeyIndex },
36-
{ 'nut-key--lock': item.type == 'lock' },
37-
{ 'nut-key--delete': item.type == 'delete' }
38-
]"
39-
@touchstart="(event: TouchEvent) => onTouchstart(item, event)"
40-
@touchmove="(event: TouchEvent) => onTouchMove(event)"
41-
@touchend="onTouchEnd"
42-
>
14+
<div v-for="item of keysList" :key="'key' + item.id" :class="[
15+
'nut-key__wrapper',
16+
{
17+
'nut-key__wrapper--wider':
18+
item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1
19+
}
20+
]">
21+
<div :class="[
22+
'nut-key',
23+
{ 'nut-key--active': item.id == clickKeyIndex },
24+
{ 'nut-key--lock': item.type == 'lock' },
25+
{ 'nut-key--delete': item.type == 'delete' }
26+
]" @touchstart="(event: TouchEvent) => onTouchstart(item, event)"
27+
@touchmove="(event: TouchEvent) => onTouchMove(event)" @touchend="onTouchEnd">
4328
<template v-if="item.type == 'number' || item.type == 'custom'">{{ item.id }}</template>
44-
<img
45-
v-if="item.type == 'lock'"
46-
src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png"
47-
/>
48-
<img
49-
v-if="item.type == 'delete'"
50-
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
51-
/>
29+
<img v-if="item.type == 'lock'"
30+
src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png" />
31+
<img v-if="item.type == 'delete'"
32+
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png" />
5233
</div>
5334
</div>
5435
</div>
5536
<div v-if="type == 'rightColumn'" class="nut-number-keyboard__sidebar">
5637
<div class="nut-key__wrapper">
57-
<div
58-
:class="['nut-key', { active: clickKeyIndex == 'delete' }]"
59-
@touchstart="(event: TouchEvent) => onTouchstart({ id: 'delete', type: 'delete' }, event)"
60-
@touchmove="(event: TouchEvent) => onTouchMove(event)"
61-
@touchend="onTouchEnd"
62-
>
38+
<div :class="['nut-key', { active: clickKeyIndex == 'delete' }]"
39+
@touchstart="(event: TouchEvent) => onTouchstart({ id: 'delete', type: 'delete' }, event)"
40+
@touchmove="(event: TouchEvent) => onTouchMove(event)" @touchend="onTouchEnd">
6341
<img
64-
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
65-
/>
42+
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png" />
6643
</div>
6744
</div>
68-
<div class="nut-key__wrapper nut-key__wrapper--finish" @click="closeBoard()">
45+
<div class="nut-key__wrapper nut-key__wrapper--finish" @click="confirm">
6946
<div :class="['nut-key', 'nut-key--finish ', { activeFinsh: clickKeyIndex == 'finish' }]">
7047
{{ confirmText || translate('done') }}
7148
</div>
@@ -138,7 +115,7 @@ export default create({
138115
default: true
139116
}
140117
},
141-
emits: ['input', 'delete', 'close', 'update:modelValue', 'update:visible'],
118+
emits: ['input', 'delete', 'close', 'confirm', 'update:modelValue', 'update:visible'],
142119
setup(props, { emit }) {
143120
const translate = useLocale(cN)
144121
const clickKeyIndex: Ref<string | undefined | number> = ref(undefined)
@@ -239,10 +216,15 @@ export default create({
239216
emit('close')
240217
}
241218
219+
const confirm = () => {
220+
emit('confirm')
221+
}
222+
242223
return {
243224
clickKeyIndex,
244225
defaultKey,
245226
closeBoard,
227+
confirm,
246228
onTouchEnd,
247229
onTouchMove,
248230
onTouchstart,

‎src/packages/__VUE/numberkeyboard/index.vue

+32-48
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
<template>
22
<div ref="root">
3-
<nut-popup
4-
v-model:visible="show"
5-
position="bottom"
6-
:pop-class="popClass"
7-
:overlay="false"
8-
:lock-scroll="lockScroll"
9-
:teleport-disable="false"
10-
>
3+
<nut-popup v-model:visible="show" position="bottom" :pop-class="popClass" :overlay="false" :lock-scroll="lockScroll"
4+
:teleport-disable="false">
115
<div class="nut-number-keyboard">
126
<div v-if="title" class="nut-number-keyboard__header">
137
<h3 class="nut-number-keyboard__title">{{ title }}</h3>
@@ -17,54 +11,39 @@
1711
</div>
1812
<div class="nut-number-keyboard__body">
1913
<div class="nut-number-keyboard__keys">
20-
<div
21-
v-for="item of keysList"
22-
:key="'key' + item.id"
23-
:class="[
24-
'nut-key__wrapper',
25-
{
26-
'nut-key__wrapper--wider':
27-
item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1
28-
}
29-
]"
30-
>
31-
<div
32-
:class="[
33-
'nut-key',
34-
{ 'nut-key--active': item.id == clickKeyIndex },
35-
{ 'nut-key--lock': item.type == 'lock' },
36-
{ 'nut-key--delete': item.type == 'delete' }
37-
]"
38-
@touchstart="(event: TouchEvent) => onTouchstart(item, event)"
39-
@touchmove="(event: TouchEvent) => onTouchMove(event)"
40-
@touchend="(event: TouchEvent) => onTouchEnd(event)"
41-
>
14+
<div v-for="item of keysList" :key="'key' + item.id" :class="[
15+
'nut-key__wrapper',
16+
{
17+
'nut-key__wrapper--wider':
18+
item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1
19+
}
20+
]">
21+
<div :class="[
22+
'nut-key',
23+
{ 'nut-key--active': item.id == clickKeyIndex },
24+
{ 'nut-key--lock': item.type == 'lock' },
25+
{ 'nut-key--delete': item.type == 'delete' }
26+
]" @touchstart="(event: TouchEvent) => onTouchstart(item, event)"
27+
@touchmove="(event: TouchEvent) => onTouchMove(event)"
28+
@touchend="(event: TouchEvent) => onTouchEnd(event)">
4229
<template v-if="item.type == 'number' || item.type == 'custom'">{{ item.id }}</template>
43-
<img
44-
v-if="item.type == 'lock'"
45-
src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png"
46-
/>
47-
<img
48-
v-if="item.type == 'delete'"
49-
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
50-
/>
30+
<img v-if="item.type == 'lock'"
31+
src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png" />
32+
<img v-if="item.type == 'delete'"
33+
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png" />
5134
</div>
5235
</div>
5336
</div>
5437
<div v-if="type == 'rightColumn'" class="nut-number-keyboard__sidebar">
5538
<div class="nut-key__wrapper">
56-
<div
57-
:class="['nut-key', { active: clickKeyIndex == 'delete' }]"
58-
@touchstart="(event: TouchEvent) => onTouchstart({ id: 'delete', type: 'delete' }, event)"
59-
@touchmove="(event: TouchEvent) => onTouchMove(event)"
60-
@touchend="onTouchEnd"
61-
>
39+
<div :class="['nut-key', { active: clickKeyIndex == 'delete' }]"
40+
@touchstart="(event: TouchEvent) => onTouchstart({ id: 'delete', type: 'delete' }, event)"
41+
@touchmove="(event: TouchEvent) => onTouchMove(event)" @touchend="onTouchEnd">
6242
<img
63-
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
64-
/>
43+
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png" />
6544
</div>
6645
</div>
67-
<div class="nut-key__wrapper nut-key__wrapper--finish" @click="closeBoard()">
46+
<div class="nut-key__wrapper nut-key__wrapper--finish" @click="confirm">
6847
<div :class="['nut-key', 'nut-key--finish ', { activeFinsh: clickKeyIndex == 'finish' }]">
6948
{{ confirmText || translate('done') }}
7049
</div>
@@ -134,7 +113,7 @@ export default create({
134113
default: true
135114
}
136115
},
137-
emits: ['input', 'delete', 'close', 'blur', 'update:modelValue', 'update:visible'],
116+
emits: ['input', 'delete', 'close', 'blur', 'confirm', 'update:modelValue', 'update:visible'],
138117
setup(props, { emit }) {
139118
const translate = useLocale(cN)
140119
const clickKeyIndex: Ref<string | undefined | number> = ref(undefined)
@@ -253,10 +232,15 @@ export default create({
253232
emit('close')
254233
}
255234
235+
const confirm = () => {
236+
emit('confirm')
237+
}
238+
256239
return {
257240
clickKeyIndex,
258241
defaultKey,
259242
closeBoard,
243+
confirm,
260244
onTouchEnd,
261245
onTouchMove,
262246
onTouchstart,

0 commit comments

Comments
 (0)