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