1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction, FormItemProps } from './common'
|
3 |
|
4 | interface TextareaProps extends StandardProps, FormItemProps {
|
5 | /** 输入框的内容
|
6 | * @supported weapp, h5, rn, tt
|
7 | */
|
8 | value?: string
|
9 |
|
10 | /** 输入框为空时占位符
|
11 | * @supported weapp, h5, rn, tt
|
12 | */
|
13 | placeholder?: string
|
14 |
|
15 | /** 指定 placeholder 的样式
|
16 | * @supported weapp, tt
|
17 | */
|
18 | placeholderStyle?: string
|
19 |
|
20 | /** 指定 placeholder 的样式类
|
21 | * @default "textarea-placeholder"
|
22 | * @supported weapp, tt
|
23 | */
|
24 | placeholderClass?: string
|
25 |
|
26 | /** 是否禁用
|
27 | * @default false
|
28 | * @supported weapp, h5, rn, tt
|
29 | */
|
30 | disabled?: boolean
|
31 |
|
32 | /** 最大输入长度,设置为 -1 的时候不限制最大长度
|
33 | * @default 140
|
34 | * @supported weapp, h5, rn, tt
|
35 | */
|
36 | maxlength?: number
|
37 |
|
38 | /** 自动聚焦,拉起键盘
|
39 | * @default false
|
40 | * @supported weapp, h5
|
41 | */
|
42 | autoFocus?: boolean
|
43 |
|
44 | /** 获取焦点
|
45 | * @default false
|
46 | * @supported weapp, rn, tt
|
47 | */
|
48 | focus?: boolean
|
49 |
|
50 | /** 是否自动增高,设置 autoHeight 时,style.height不生效
|
51 | * @default false
|
52 | * @supported weapp, rn, tt
|
53 | */
|
54 | autoHeight?: boolean
|
55 |
|
56 | /** 如果 Textarea 是在一个 `position:fixed` 的区域,需要显示指定属性 fixed 为 true
|
57 | * @default false
|
58 | * @supported weapp
|
59 | */
|
60 | fixed?: boolean
|
61 |
|
62 | /** 指定光标与键盘的距离,单位 px 。取 Textarea 距离底部的距离和 cursorSpacing 指定的距离的最小值作为光标与键盘的距离
|
63 | * @default 0
|
64 | * @supported weapp, tt
|
65 | */
|
66 | cursorSpacing?: number
|
67 |
|
68 | /** 指定 focus 时的光标位置
|
69 | * @default -1
|
70 | * @supported weapp, tt
|
71 | */
|
72 | cursor?: number
|
73 |
|
74 | /** 是否显示键盘上方带有”完成“按钮那一栏
|
75 | * @default true
|
76 | * @supported weapp, tt
|
77 | */
|
78 | showConfirmBar?: boolean
|
79 |
|
80 | /** 光标起始位置,自动聚集时有效,需与 selectionEnd 搭配使用
|
81 | * @default -1
|
82 | * @supported weapp, rn, tt
|
83 | */
|
84 | selectionStart?: number
|
85 |
|
86 | /** 光标结束位置,自动聚集时有效,需与 selectionStart 搭配使用
|
87 | * @default -1
|
88 | * @supported weapp, rn, tt
|
89 | */
|
90 | selectionEnd?: number
|
91 |
|
92 | /** 键盘弹起时,是否自动上推页面
|
93 | * @default true
|
94 | * @supported weapp, tt
|
95 | */
|
96 | adjustPosition?: boolean
|
97 |
|
98 | /** focus 时,点击页面的时候不收起键盘
|
99 | * @default false
|
100 | * @supported weapp, tt
|
101 | */
|
102 | holdKeyboard?: boolean
|
103 |
|
104 | /** 是否去掉 iOS 下的默认内边距
|
105 | * @default false
|
106 | * @supported weapp, tt
|
107 | */
|
108 | disableDefaultPadding?: boolean
|
109 |
|
110 | /** 输入框聚焦时触发
|
111 | * @supported weapp, h5, rn, tt
|
112 | */
|
113 | onFocus?: CommonEventFunction<TextareaProps.onFocusEventDetail>
|
114 |
|
115 | /** 输入框失去焦点时触发
|
116 | * @supported weapp, h5, rn, tt
|
117 | */
|
118 | onBlur?: CommonEventFunction<TextareaProps.onBlurEventDetail>
|
119 |
|
120 | /** 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
|
121 | * @supported weapp, rn, tt
|
122 | */
|
123 | onLineChange?: CommonEventFunction<TextareaProps.onLineChangeEventDetail>
|
124 |
|
125 | /** 当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode}
|
126 | *
|
127 | * **onInput 处理函数的返回值并不会反映到 textarea 上**
|
128 | * @supported weapp, h5, rn, tt
|
129 | */
|
130 | onInput?: CommonEventFunction<TextareaProps.onInputEventDetail>
|
131 |
|
132 | /** 点击完成时, 触发 confirm 事件,event.detail = {value: value}
|
133 | * @supported weapp, rn, tt
|
134 | */
|
135 | onConfirm?: CommonEventFunction<TextareaProps.onConfirmEventDetail>
|
136 |
|
137 | /** 键盘高度发生变化的时候触发此事件
|
138 | * @supported weapp
|
139 | */
|
140 | onKeyboardHeightChange?: CommonEventFunction<TextareaProps.onKeyboardHeightChangeEventDetail>
|
141 |
|
142 | /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
|
143 | * @supported h5
|
144 | */
|
145 | nativeProps?: Record<string, unknown>
|
146 | }
|
147 |
|
148 | declare namespace TextareaProps {
|
149 | interface onFocusEventDetail {
|
150 | /** 输入值 */
|
151 | value: string
|
152 | /** 键盘高度 */
|
153 | height: number
|
154 | }
|
155 | interface onBlurEventDetail {
|
156 | /** 输入值 */
|
157 | value: string
|
158 | /** 光标位置 */
|
159 | cursor: number
|
160 | }
|
161 | interface onLineChangeEventDetail {
|
162 | height: number
|
163 | heightRpx: number
|
164 | lineCount: number
|
165 | }
|
166 | interface onInputEventDetail {
|
167 | /** 输入值 */
|
168 | value: string
|
169 | /** 光标位置 */
|
170 | cursor: number
|
171 | /** 键值 */
|
172 | keyCode: number
|
173 | }
|
174 | interface onConfirmEventDetail {
|
175 | /** 输入值 */
|
176 | value: string
|
177 | }
|
178 | interface onKeyboardHeightChangeEventDetail {
|
179 | /** 键盘高度 */
|
180 | height: number
|
181 | /** 持续时间 */
|
182 | duration: number
|
183 | }
|
184 | }
|
185 |
|
186 | /** 多行输入框。该组件是原生组件,使用时请注意相关限制
|
187 | * @classification forms
|
188 | * @supported weapp, h5, rn
|
189 | * @example_react
|
190 | * ```tsx
|
191 | * export default class PageView extends Component {
|
192 | * constructor() {
|
193 | * super(...arguments)
|
194 | * }
|
195 | *
|
196 | * render() {
|
197 | * return (
|
198 | * <View className='components-page'>
|
199 | * <Text>输入区域高度自适应,不会出现滚动条</Text>
|
200 | * <Textarea style='background:#fff;width:100%;min-height:80px;padding:0 30rpx;' autoHeight/>
|
201 | * <Text>这是一个可以自动聚焦的 textarea</Text>
|
202 | * <Textarea style='background:#fff;width:100%;height:80px;padding:0 30rpx;' autoFocus/>
|
203 | * </View>
|
204 | * )
|
205 | * }
|
206 | * }
|
207 | * ```
|
208 | * @example_vue
|
209 | * ```html
|
210 | * <template>
|
211 | * <view class="components-page">
|
212 | * <text>输入区域高度自适应,不会出现滚动条</text>
|
213 | * <textarea style="background:#efefef;width:100%;min-height:80px;padding:0 30rpx;" :auto-height="true" />
|
214 | * <text>这是一个可以自动聚焦的 textarea</text>
|
215 | * <textarea style="background:#efefef;width:100%;height:80px;padding:0 30rpx;" :auto-focusd="true" />
|
216 | * </view>
|
217 | * </template>
|
218 | * ```
|
219 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html
|
220 | */
|
221 | declare const Textarea: ComponentType<TextareaProps>
|
222 |
|
223 | export { Textarea, TextareaProps }
|
224 |
|