diff --git a/@types/textarea.d.ts b/@types/textarea.d.ts index 2d5b8a837..38cd46204 100644 --- a/@types/textarea.d.ts +++ b/@types/textarea.d.ts @@ -14,6 +14,14 @@ export interface AtTextareaProps { autoFocus?: boolean + focus?: boolean + + showConfirmBar?: boolean + + selectionStart?: number + + selectionEnd?: number + count?: number fixed?: boolean @@ -31,6 +39,8 @@ export interface AtTextareaProps { obBlur?: BaseEventFunction onConfirm?: BaseEventFunction + + onLinechange?: BaseEventFunction } declare const AtTextarea: ComponentClass diff --git a/docs/markdown/textarea.md b/docs/markdown/textarea.md index eea8c4a33..e592d42ac 100644 --- a/docs/markdown/textarea.md +++ b/docs/markdown/textarea.md @@ -57,6 +57,10 @@ import { AtTextarea } from 'taro-ui' | placeholder | 占位符 | String | - | - | | disabled | 是否禁用 | String | - | false | | autoFocus| 是否自动聚焦 | Boolean | - | false | +| focus| 获取焦点 | Boolean | - | false | +| showConfirmBar| 是否显示键盘上方带有” 完成 “按钮那一栏 | Boolean | - | false | +| selectionStart| 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | Number | - | -1 | +| selectionEnd| 光标结束位置,自动聚集时有效,需与 selectionStart 搭配使用 | Number | - | -1 | | count | 是否显示字数 | Boolean | - | true | | fixed| 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true | Boolean | - | false| | textOverflowForbidden | 文字超出最大长度时是否禁止输入,若否,则还可以在 maxlength 的基础上输入500字符,并右下角红字提示 | Boolean | - | true | @@ -71,3 +75,4 @@ import { AtTextarea } from 'taro-ui' | onFocus | 输入框获得焦点时触发 | event | | onBlur | 输入框失去焦点时触发 | event | | onConfirm | 点击完成时触发 | event | +| onLinechange | 输入框行数变化时调用 | event | diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js index afc525854..b4d084dc6 100644 --- a/src/components/textarea/index.js +++ b/src/components/textarea/index.js @@ -16,10 +16,15 @@ export default class AtTextarea extends AtComponent { placeholder: '', disabled: false, autoFocus: false, + focus: false, + showConfirmBar: false, + selectionStart: -1, + selectionEnd: -1, count: true, fixed: false, height: '', textOverflowForbidden: true, + onLinechange: defaultFunc, onChange: defaultFunc, onFocus: defaultFunc, onBlur: defaultFunc, @@ -37,10 +42,15 @@ export default class AtTextarea extends AtComponent { placeholder: PropTypes.string, disabled: PropTypes.bool, autoFocus: PropTypes.bool, + focus: PropTypes.bool, + showConfirmBar: PropTypes.bool, + selectionStart: PropTypes.number, + selectionEnd: PropTypes.number, count: PropTypes.bool, textOverflowForbidden: PropTypes.bool, fixed: PropTypes.bool, height: PropTypes.string, + onLinechange: PropTypes.func, onChange: PropTypes.func, onFocus: PropTypes.func, onBlur: PropTypes.func, @@ -63,6 +73,10 @@ export default class AtTextarea extends AtComponent { this.props.onConfirm(e, ...arguments) } + handleLinechange (e) { + this.props.onLinechange(e, ...arguments) + } + render () { const { style, @@ -73,6 +87,10 @@ export default class AtTextarea extends AtComponent { count, disabled, autoFocus, + focus, + showConfirmBar, + selectionStart, + selectionEnd, fixed, textOverflowForbidden, height @@ -90,17 +108,21 @@ export default class AtTextarea extends AtComponent { cursorSpacing={cursorSpacing} className='at-textarea__textarea' value={value} - showConfirmBar={false} confirmType='完成' maxlength={actualMaxlength} placeholder={placeholder} disabled={disabled} autoFocus={autoFocus} + focus={focus} + showConfirmBar={showConfirmBar} + selectionStart={selectionStart} + selectionEnd={selectionEnd} fixed={fixed} onInput={this.handleInput.bind(this)} onFocus={this.handleFocus.bind(this)} onBlur={this.handleBlur.bind(this)} onConfirm={this.handleConfirm.bind(this)} + onLinechange={this.handleLinechange.bind(this)} /> { count