Textarea 文本域
为配合表单组件c-form
而设计的,内置边框,字数统计,图标等。
平台
App | 小程序 | H5 |
---|---|---|
√ | √ | √ |
属性
属性名 | 类型 | 默认值 | 说明 | 平台 |
---|---|---|---|---|
modelValue | String,Number | null | All | |
height | Number,String | null | 输入框高度 注意此高度是原生textarea组件的高度,非当前组件的高度 如果原生input组件的min-height大于设置的height,那么height无效 | All |
autoHeight | Boolean | null | 是否自动增高,设置auto-height时,height不生效 | All |
showCount | Boolean | false | 是否显示字数统计 | All |
fixed | Boolean | false | 如果在一个position:fixed的区域,需要显示指定属性fixed为true | All |
placeholder | String | null | 水印 | All |
placeholderColor | String | c-t-input-placeholder | 水印颜色 支持c-t-开头的类(字节跳动系列小程序不支持) | All |
disabled | Boolean | null | 是否禁用 | All |
disabledBgColor | String | c-bg-base | 禁用背景色 支持c-bg-的类 | All |
readonly | Boolean | null | 是否只读 与disabled不同之处在于disabled会置灰组件,而readonly则不会 | All |
focus | Boolean | false | 是否自动获得焦点 | All |
beforeIcon | String,Object | null | 前置图标 为object时参考c-icon的props | All |
afterIcon | String,Object | null | 后置图标 为object时参考c-icon的props | All |
clearBtn | Boolean | true | 显示清除按钮 | All |
clearIcon | String,Object | error-fill | 清除图标 参考c-icon的props | All |
align | String | left | 文字对齐方式,left | center |
color | String | null | 文字颜色,支持c-t-开头的类 | All |
fontSize | Number,String | null | 文字大小 | All |
border | String | all | 边框 all,bottom,none | All |
borderColor | String | null | 边框颜色 支持c-bdr-开头的类 | All |
radius | String,Number,Array | c-radius-base | 圆角 | All |
maxLength | Number,String | 140 | 最大输入长度,设置为-1的时候不限制最大长度 | All |
confirmType | String | null | 设置键盘右下角按钮的文字,仅在type="text"时生效。 search,go,send,done,next | All |
cursorSpacing | Number | 0 | 指定光标与键盘的距离 取input距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | All |
confirmHold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | All |
selectionStart | Number | -1 | 光标起始位置,自动聚集时有效,需与selection-end搭配使用 | All |
selectionEnd | Number | -1 | 光标结束位置,自动聚集时有效,需与selection-start搭配使用 | All |
adjustPosition | Boolean | true | 键盘弹起时,是否自动上推页面 | All |
autoBlur | Boolean | false | 键盘收起时,是否自动失去焦点 | All |
holdKeyboard | Boolean | false | focus时,点击页面的时候不收起键盘 | MP-WEIXIN 2.8.2+ |
cClass | String,Array,Object | null | 组件类 | All |
cStyle | String,Array,Object | null | 组件样式 | All |
margin | String,Number,Array | null | 外边距 | All |
padding | String,Number,Array | null | 内边距 | All |
bgColor | String | null | 背景色,支持c-bg- 开头的背景色类 | All |
事件
事件名 | 说明 |
---|---|
update:modelValue | |
clear | |
focus | |
blur | event |
confirm | 点击输入法键盘的完成按钮,返回value |
beforeIconClick | |
afterIconClick | |
change | value |
keyboardheightchange |
插槽
插槽名 | 说明 |
---|---|
before | 前置插槽 |
after | 后置插槽 |
示例
vue
<template>
<c-textarea />
</template>
1
2
3
2
3
文本域SCSS变量
scss
// 默认高度
$input-textarea-height: 170rpx;
// 顶部内边距
$input-textarea-top: 14rpx;
1
2
3
4
2
3
4