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