Skip to content

Commit 7c47959

Browse files
Garfield550Garfield550
committed
feat: 增加 onKeyboardHeightChange 事件支持 close #974 
1 parent 3ee86ea commit 7c47959

File tree

4 files changed

+197
-42
lines changed

4 files changed

+197
-42
lines changed

‎docs/markdown/input.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,3 +242,4 @@ export default class Index extends Taro.Component {
242242
| onConfirm | √ | x | 点击完成按钮时触发，v2.0.3 版本可以获取 event 参数 | (value,event) => void |
243243
| onErrorClick | √ | √ | 点击错误按钮触发的事件 | () => void |
244244
| onClick | √ | √ | 当 editable 为 false时，点击组件触发的事件 | () => void |
245+
| onKeyboardHeightChange | √ | | 键盘高度发生变化的时候触发此事件 | (event) => void |

‎src/components/input/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,8 @@ export default class AtInput extends AtComponent<AtInputProps> {
104104
autoFocus,
105105
focus,
106106
value,
107-
required
107+
required,
108+
onKeyboardHeightChange
108109
} = this.props
109110
const { type, maxLength, disabled, password } = getInputProps(this.props)
110111

@@ -162,6 +163,7 @@ export default class AtInput extends AtComponent<AtInputProps> {
162163
onFocus={this.onFocus}
163164
onBlur={this.onBlur}
164165
onConfirm={this.onConfirm}
166+
onKeyboardHeightChange={onKeyboardHeightChange}
165167
/>
166168
{clear && value && (
167169
<View className='at-input__icon' onTouchEnd={this.clearValue}>

‎src/pages/form/input/index.tsx

Lines changed: 183 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import { AtForm, AtInput } from 'taro-ui'
2+
import { Image, View } from '@tarojs/components'
3+
import { BaseEventOrig } from '@tarojs/components/types/common'
4+
import { InputProps } from '@tarojs/components/types/Input'
15
import Taro from '@tarojs/taro'
2-
import { View, Image } from '@tarojs/components'
3-
import { AtInput, AtForm } from 'taro-ui'
4-
import DocsHeader from '../../components/doc-header'
56
import verificationCode from '../../../assets/images/verification_code.png'
7+
import DocsHeader from '../../components/doc-header'
68
import './index.scss'
79

810
interface IndexState {
@@ -20,17 +22,15 @@ interface IndexState {
2022
value13: string
2123
value14: string
2224
value15: string
25+
value16: string
26+
value17: string
2327
disabled: boolean
2428
second: number
2529
[key: string]: string | boolean | number
2630
}
2731

2832
export default class Index extends Taro.Component<{}, IndexState> {
29-
public config: Taro.PageConfig = {
30-
navigationBarTitleText: 'Taro UI'
31-
}
32-
33-
public constructor () {
33+
public constructor() {
3434
super(...arguments)
3535
this.state = {
3636
value1: '',
@@ -48,16 +48,21 @@ export default class Index extends Taro.Component<{}, IndexState> {
4848
value14: '',
4949
value15: '',
5050
value16: '',
51+
value17: '',
5152
disabled: false,
5253
second: 60
5354
}
5455
}
5556

56-
private showTipText (): string {
57+
public config: Taro.PageConfig = {
58+
navigationBarTitleText: 'Taro UI'
59+
}
60+
61+
private showTipText(): string {
5762
return this.state.disabled ? `${this.state.second}s后重试` : '发送验证码'
5863
}
5964

60-
private sendCode (): void {
65+
private sendCode(): void {
6166
if (this.state.disabled) return
6267
this.setState({
6368
disabled: true
@@ -78,29 +83,39 @@ export default class Index extends Taro.Component<{}, IndexState> {
7883
}, 1000)
7984
}
8085

81-
private handleInput (stateName: string, value: string): void {
86+
private handleInput(stateName: string, value: string): void {
8287
this.setState({
8388
[stateName]: value
8489
})
8590
}
8691

87-
private handleClick (): void {
92+
// private handleClick(): void {
93+
// Taro.showToast({
94+
// title: '已发送验证码',
95+
// icon: 'success',
96+
// duration: 2000
97+
// })
98+
// }
99+
100+
private onClickErrorIcon(): void {
88101
Taro.showToast({
89-
title: '已发送验证码',
102+
title: '请输入数字',
90103
icon: 'success',
91104
duration: 2000
92105
})
93106
}
94107

95-
private onClickErrorIcon (): void {
108+
private handleKeyboardHeightChange(
109+
event: BaseEventOrig<InputProps.onKeyboardHeightChangeEventDetail>
110+
): void {
96111
Taro.showToast({
97-
title: '请输入数字',
112+
title: `高度 ${event.detail.height}`,
98113
icon: 'success',
99114
duration: 2000
100115
})
101116
}
102117

103-
public render (): JSX.Element {
118+
public render(): JSX.Element {
104119
return (
105120
<View className='page'>
106121
{/* S Header */}
@@ -115,9 +130,28 @@ export default class Index extends Taro.Component<{}, IndexState> {
115130
<View className='panel__content no-padding'>
116131
<View className='component-item'>
117132
<AtForm>
118-
<AtInput name='value1' title='标准五个字' type='text' placeholder='标准五个字' value={this.state.value1} onChange={this.handleInput.bind(this, 'value1')} />
119-
<AtInput name='value2' title='标题实在特别长就换行' placeholder='其他列保持正常间距' value={this.state.value2} onChange={this.handleInput.bind(this, 'value2')} />
120-
<AtInput name='value3' border={false} placeholder='无标题' value={this.state.value3} onChange={this.handleInput.bind(this, 'value3')} />
133+
<AtInput
134+
name='value1'
135+
title='标准五个字'
136+
type='text'
137+
placeholder='标准五个字'
138+
value={this.state.value1}
139+
onChange={this.handleInput.bind(this, 'value1')}
140+
/>
141+
<AtInput
142+
name='value2'
143+
title='标题实在特别长就换行'
144+
placeholder='其他列保持正常间距'
145+
value={this.state.value2}
146+
onChange={this.handleInput.bind(this, 'value2')}
147+
/>
148+
<AtInput
149+
name='value3'
150+
border={false}
151+
placeholder='无标题'
152+
value={this.state.value3}
153+
onChange={this.handleInput.bind(this, 'value3')}
154+
/>
121155
</AtForm>
122156
</View>
123157
</View>
@@ -129,12 +163,55 @@ export default class Index extends Taro.Component<{}, IndexState> {
129163
<View className='panel__content no-padding'>
130164
<View className='component-item'>
131165
<AtForm>
132-
<AtInput name='value4' title='文本' type='text' placeholder='单行文本' value={this.state.value4} onChange={this.handleInput.bind(this, 'value4')} />
133-
<AtInput name='value5' title='数字' type='number' placeholder='请输入数字' value={this.state.value5} onChange={this.handleInput.bind(this, 'value5')} />
134-
<AtInput name='value6' title='密码' type='password' placeholder='密码不能少于10位数' value={this.state.value6} onChange={this.handleInput.bind(this, 'value6')} />
135-
<AtInput name='value7' title='身份证' type='idcard' placeholder='身份证号码' value={this.state.value7} onChange={this.handleInput.bind(this, 'value7')} />
136-
<AtInput name='value8' title='小数' type='digit' placeholder='请输入小数' value={this.state.value8} onChange={this.handleInput.bind(this, 'value8')} />
137-
<AtInput name='value9' border={false} title='手机号码' type='phone' placeholder='手机号码' value={this.state.value9} onChange={this.handleInput.bind(this, 'value9')} />
166+
<AtInput
167+
name='value4'
168+
title='文本'
169+
type='text'
170+
placeholder='单行文本'
171+
value={this.state.value4}
172+
onChange={this.handleInput.bind(this, 'value4')}
173+
/>
174+
<AtInput
175+
name='value5'
176+
title='数字'
177+
type='number'
178+
placeholder='请输入数字'
179+
value={this.state.value5}
180+
onChange={this.handleInput.bind(this, 'value5')}
181+
/>
182+
<AtInput
183+
name='value6'
184+
title='密码'
185+
type='password'
186+
placeholder='密码不能少于10位数'
187+
value={this.state.value6}
188+
onChange={this.handleInput.bind(this, 'value6')}
189+
/>
190+
<AtInput
191+
name='value7'
192+
title='身份证'
193+
type='idcard'
194+
placeholder='身份证号码'
195+
value={this.state.value7}
196+
onChange={this.handleInput.bind(this, 'value7')}
197+
/>
198+
<AtInput
199+
name='value8'
200+
title='小数'
201+
type='digit'
202+
placeholder='请输入小数'
203+
value={this.state.value8}
204+
onChange={this.handleInput.bind(this, 'value8')}
205+
/>
206+
<AtInput
207+
name='value9'
208+
border={false}
209+
title='手机号码'
210+
type='phone'
211+
placeholder='手机号码'
212+
value={this.state.value9}
213+
onChange={this.handleInput.bind(this, 'value9')}
214+
/>
138215
</AtForm>
139216
</View>
140217
</View>
@@ -146,12 +223,65 @@ export default class Index extends Taro.Component<{}, IndexState> {
146223
<View className='panel__content no-padding'>
147224
<View className='component-item'>
148225
<AtForm>
149-
<AtInput name='value10' disabled title='禁用' type='text' placeholder='禁止输入' value={this.state.value10} onChange={this.handleInput.bind(this, 'value10')} />
150-
<AtInput name='value11' error title='出现错误' type='text' placeholder='点击按钮触发回调' value={this.state.value11} onChange={this.handleInput.bind(this, 'value11')} onErrorClick={this.onClickErrorIcon.bind(this)} />
151-
<AtInput name='value12' editable={false} title='不可编辑' type='text' placeholder='不可编辑' value='不可编辑的内容' />
152-
<AtInput name='value13' border={false} clear title='清除按钮' type='text' placeholder='点击清除按钮清空内容' value={this.state.value13} onChange={this.handleInput.bind(this, 'value13')} />
153-
<AtInput name='value16' border={false} required title='必填项' type='text' placeholder='必填项' value={this.state.value16} onChange={this.handleInput.bind(this, 'value16')} />
154-
226+
<AtInput
227+
name='value10'
228+
disabled
229+
title='禁用'
230+
type='text'
231+
placeholder='禁止输入'
232+
value={this.state.value10}
233+
onChange={this.handleInput.bind(this, 'value10')}
234+
/>
235+
<AtInput
236+
name='value11'
237+
error
238+
title='出现错误'
239+
type='text'
240+
placeholder='点击按钮触发回调'
241+
value={this.state.value11}
242+
onChange={this.handleInput.bind(this, 'value11')}
243+
onErrorClick={this.onClickErrorIcon.bind(this)}
244+
/>
245+
<AtInput
246+
name='value12'
247+
editable={false}
248+
title='不可编辑'
249+
type='text'
250+
placeholder='不可编辑'
251+
value='不可编辑的内容'
252+
/>
253+
<AtInput
254+
name='value13'
255+
border={false}
256+
clear
257+
title='清除按钮'
258+
type='text'
259+
placeholder='点击清除按钮清空内容'
260+
value={this.state.value13}
261+
onChange={this.handleInput.bind(this, 'value13')}
262+
/>
263+
<AtInput
264+
name='value16'
265+
border={false}
266+
required
267+
title='必填项'
268+
type='text'
269+
placeholder='必填项'
270+
value={this.state.value16}
271+
onChange={this.handleInput.bind(this, 'value16')}
272+
/>
273+
<AtInput
274+
name='value17'
275+
border={false}
276+
title='监听事件'
277+
type='text'
278+
placeholder='监听键盘高度事件'
279+
value={this.state.value17}
280+
onChange={this.handleInput.bind(this, 'value17')}
281+
onKeyboardHeightChange={this.handleKeyboardHeightChange.bind(
282+
this
283+
)}
284+
/>
155285
</AtForm>
156286
</View>
157287
</View>
@@ -163,15 +293,32 @@ export default class Index extends Taro.Component<{}, IndexState> {
163293
<View className='panel__content no-padding'>
164294
<View className='component-item'>
165295
<AtForm>
166-
<AtInput name='value14' title='验证码' type='text' maxLength={4} clear placeholder='验证码' value={this.state.value14} onChange={this.handleInput.bind(this, 'value14')}>
296+
<AtInput
297+
name='value14'
298+
title='验证码'
299+
type='text'
300+
maxLength={4}
301+
clear
302+
placeholder='验证码'
303+
value={this.state.value14}
304+
onChange={this.handleInput.bind(this, 'value14')}
305+
>
167306
<Image src={verificationCode} />
168307
</AtInput>
169-
<AtInput name='value15' border={false} type='phone' clear placeholder='请输入手机号码' value={this.state.value15} onChange={this.handleInput.bind(this, 'value15')}>
308+
<AtInput
309+
name='value15'
310+
border={false}
311+
type='phone'
312+
clear
313+
placeholder='请输入手机号码'
314+
value={this.state.value15}
315+
onChange={this.handleInput.bind(this, 'value15')}
316+
>
170317
<View
171318
style={{
172-
'color': this.state.disabled ? '#FF4949' : '',
173-
'fontSize': '12px',
174-
'width': '90px'
319+
color: this.state.disabled ? '#FF4949' : '',
320+
fontSize: '12px',
321+
width: '90px'
175322
}}
176323
onClick={this.sendCode.bind(this)}
177324
>

‎types/input.d.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
import { MouseEvent, ComponentClass } from 'react'
2-
import { CommonEventFunction, CommonEvent } from '@tarojs/components/types/common'
1+
import { ComponentClass } from 'react'
2+
import { CommonEvent } from '@tarojs/components/types/common'
33
import { InputProps } from '@tarojs/components/types/Input'
4-
54
import AtComponent from './base'
65

7-
declare type OmitInputProps = Omit<InputProps, 'className' | 'type' | 'onBlur' | 'onFocus' | 'onChange' | 'onConfirm'>
8-
declare type InputFunction<T extends string | number> = (value: T, event: CommonEvent) => void
6+
declare type OmitInputProps = Omit<
7+
InputProps,
8+
'className' | 'type' | 'onBlur' | 'onFocus' | 'onChange' | 'onConfirm'
9+
>
10+
declare type InputFunction<T extends string | number> = (
11+
value: T,
12+
event: CommonEvent
13+
) => void
914

1015
export interface AtInputProps extends AtComponent, OmitInputProps {
1116
/**

0 commit comments

Comments
 (0)