主题
LimeTextarea 文本域组件
一个功能丰富的文本域组件，用于多行文本输入。支持自动增高、字数统计、标签布局等多种配置，可用于留言、评论、反馈等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的文本输入需求。
插件依赖：
lime-shared、lime-style
文档链接
📚 组件详细文档请访问以下站点：
安装方法
- 在uni-app
中搜索并导入
lime-textarea - 导入后可能需要重新编译项目
- 在页面中使用
l-textarea组件
代码演示
基础使用
通过v-model双向绑定，或通过change事件接收输入文本
html
<l-textarea v-model="value" placeholder="请输入文字" @change="change"></l-textarea>js
const value = ref('');
const change = (value: string) => {
}带标题
通过label属性设置标题
html
<l-textarea label="标签文字" placeholder="请输入文字"></l-textarea>自动增高
通过autosize设置为true为自动增高，uniappx 鸿蒙next不支持
html
<l-textarea label="标签文字" placeholder="请输入文字" :autosize="true"></l-textarea>字符限制
通过maxlength设置最大文本字数，通过indicator设置为true可显示字数
html
<l-textarea label="标签文字" placeholder="请输入文字" :maxlength="500" :indicator="true"></l-textarea>禁用
通过disabled设置可禁止输入
html
<l-textarea label="标签文字" placeholder="请输入文字" :disabled="true"></l-textarea>竖排布局
通过layout可设置布局方向
html
<l-textarea label="标签文字" placeholder="请输入文字" layout="vertical"></l-textarea>经典边框样式
设置classic属性，使用经典边框样式。
html
<l-textarea
v-model="value"
classic
placeholder="经典边框样式"
></l-textarea>快速预览
导入插件后，可以直接使用以下标签查看演示效果：
html
<!-- 代码位于 uni_modules/lime-textarea/components/lime-textarea -->
<lime-textarea />插件标签说明
| 标签名 | 说明 |
|---|---|
l-textarea | 组件标签 |
lime-textarea | 演示标签 |
Vue2使用说明
main.js中添加以下代码：
js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)详细配置请参考官方文档：Vue Composition API
API文档
Props 属性说明
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 文本 | string | `` |
| value | 文本框值 | string | - |
| adjustPosition | 键盘弹起时，是否自动上推页面 | boolean | true |
| autofocus | 自动聚焦，拉起键盘 | boolean | false |
| autosize | 是否自动增高 | boolean | false |
| bordered | 是否显示外边框 | boolean | true |
| confirmHold | 点击键盘右下角按钮时是否保持键盘不收起 | boolean | - |
| confirmType | 设置键盘右下角按钮的文字, 可参考 | 'return' | 'send' | 'search' | 'next' | 'go' | 'done' | - |
| cursor | 指定 focus 时的光标位置 | number | - |
| cursorSpacing | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | number | - |
| disableDefaultPadding | 是否去掉 iOS 下的默认内边距 | boolean | - |
| disabled | 是否禁用文本框 | boolean | false |
| readonly | 是否只读 | boolean | false |
| fixed | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true | boolean | - |
| defaultFixed | 默认是否固定 | boolean | - |
| focus | 自动聚焦 | boolean | - |
| holdKeyboard | focus时，点击页面的时候不收起键盘 | boolean | false |
| indicator | 显示文本计数器，如 0/140。当 maxlength < 0 && maxcharacter < 0 成立时， indicator无效 | boolean | - |
| label | 左侧文本 | string | - |
| maxlength | 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度 | number | - |
| placeholder | 占位符 | string | - |
| selectionEnd | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | number | - |
| selectionStart | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | number | - |
| showConfirmBar | 是否显示键盘上方带有"完成"按钮那一栏 | boolean | true |
| layout | 标题输入框布局方式 | 'vertical' | 'horizontal' | horizontal |
| placeholderStyle | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | string | - |
| lStyle | 自定义样式 | string | - |
| labelStyle | 标签自定义样式 | string | - |
| indicatorStyle | 计数器自定义样式 | string | - |
| innerStyle | 内部文本域自定义样式 | string | - |
| classic | 是否使用经典边框样式 | boolean | false |
| borderColor | 边框颜色 | string | - |
| focusedBorderColor | 聚焦状态边框颜色 | string | - |
| focused | 是否处于聚焦状态 | boolean | - |
Events 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 输入内容变化时触发 | value:string |
| blur | 失去焦点时触发 | event: UniTextareaBlurEvent |
| focus | 获得焦点时触发 | event: UniTextareaFocusEvent |
| keyboardheightchange | 获得焦点时触发 | event:UniInputKeyboardHeightChangeEvent |
| linechange | 行高发生变化时触发 | event: UniTextareaLineChangeEvent |
| confirm | 点击完成时触发 | event: UniInputConfirmEvent |
Slots 插槽
| 名称 | 说明 |
|---|---|
| label | 自定义标签内容 |
主题定制
组件提供了以下CSS变量，可用于自定义样式：
| 变量名称 | 默认值 | 描述 |
|---|---|---|
--l-textarea-padding-y | $spacer | 文本框垂直方向间距 |
--l-textarea-padding-x | $spacer | 文本框水平方向间距 |
--l-textarea-text-line-height | 24px | 输入框文本行高 |
--l-textarea-label-line-height | 根据平台不同有所差异 | 标签文本行高 |
--l-textarea-label-width | 64px | 标签文本宽度 |
--l-textarea-label-padding-right | $spacer | 标签右侧内边距 |
--l-textarea-label-padding-bottom | $spacer-xs | 标签底部内边距 |
--l-textarea-indicator-text-line-height | 20px | 计数器文本行高 |
--l-textarea-indicator-text-padding-top | $spacer-xs | 计数器文本顶部间距 |
--l-textarea-indicator-text-align | right | 计数器文本对齐方式 |
--l-textarea-border-width | 1px | 文本框边框大小 |
--l-textarea-indicator-text-font-size | $spacer-sm | 计数器文本大小 |
--l-textarea-label-font-size | $font-size | 标签文本大小 |
--l-textarea-label-large-font-size | $font-size-md | 大号标签文本大小 |
--l-textarea-text-font-size | $font-size-md | 输入框文本大小 |
--l-textarea-placeholder-font-size | $font-size-md | 占位符文本大小 |
--l-textarea-bg-color | $bg-color-container | 文本框背景颜色 |
--l-textarea-placeholder-color | $text-color-3 | 占位符文本颜色 |
--l-textarea-text-color | $text-color-1 | 输入框文本颜色 |
--l-textarea-label-color | $text-color-1 | 标签文本颜色 |
--l-textarea-indicator-text-color | $text-color-3 | 计数器文本颜色 |
--l-textarea-border-radius | $border-radius | 文本框圆角大小 |
--l-textarea-border-color | $border-color-1 | 文本框边框颜色 |
--l-textarea-focused-border-color | $primary-color | 聚焦状态边框颜色 |
--l-textarea-disabled-text-color | $text-color-4 | 文本框禁用状态时的输入文本颜色 |
--l-textarea-border-left-space | $spacer | 边框左侧间距 |
--l-textarea-border-right-space | 0 | 边框右侧间距 |
--l-textarea-classic-padding-x | $spacer | 经典样式水平内边距 |
--l-textarea-classic-padding-y | $spacer-sm | 经典样式垂直内边距 |
支持与赞赏
如果你觉得本插件解决了你的问题，可以考虑支持作者：
| 支付宝赞助 | 微信赞助 |
|---|---|
 |  |