LimeTextarea 多行文本框

• 多行文本框用于多行文本信息输入, 兼容uniapp/uniappx
• 插件依赖lime-shared,lime-style不喜勿下

安装

导入即可，首次导入可能需要重新编译

文档

textarea

代码演示

基础使用

通过v-model双向绑定，或通过change事件接收输入文本

<l-textarea v-model="value" placeholder="请输入文字" @change="change"></l-textarea>

const value = ref('');
const change = (value: string) => {
	
}

带标题

通过label属性设置标题

<l-textarea label="标签文字" placeholder="请输入文字"></l-textarea>

自动增高

通过autosize设置为true为自动增高

<l-textarea label="标签文字" placeholder="请输入文字" :autosize="true"></l-textarea>

字符限制

通过maxlength设置最大文本字数，通过indicator设置为true可显示字数

<l-textarea label="标签文字" placeholder="请输入文字"  :maxlength="500" :indicator="true"></l-textarea>

禁用

通过disabled设置可禁止输入

<l-textarea label="标签文字" placeholder="请输入文字" :disabled="true"></l-textarea>

竖排布局

通过layout可设置布局方向

<l-textarea label="标签文字" placeholder="请输入文字" layout="vertical"></l-textarea>

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-textarea/compoents/lime-textarea -->
<lime-textarea />

插件标签

• 默认 l-textarea 为 component
• 默认 lime-textarea 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

参数	说明	类型	默认值
v-model	文本	string	``
value	文本	string	``
adjustPosition	键盘弹起时，是否自动上推页面	boolean	true
autofocus	自动聚焦，拉起键盘	boolean	false
autosize	是否自动增高	boolean	false
bordered	是否显示外边框	boolean	false
disabled	是否禁用文本框	boolean	false
focus	自动聚焦	boolean	false
holdKeyboard	focus时，点击页面的时候不收起键盘	boolean	false
indicator	显示文本计数器	boolean	false
showConfirmBar	是否显示键盘上方带有”完成“按钮那一栏	boolean	true
fixed	如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true	boolean	false
confirmHold	点击键盘右下角按钮时是否保持键盘不收起点	boolean	false
confirmType	设置键盘右下角按钮的文字可参考	string	return
cursor	指定 focus 时的光标位置	number	-1
cursorSpacing	指定光标与键盘的距离	number	0
maxlength	用户最多可以输入的字符个数，值为 -1	number	-1
selectionEnd	光标结束位置，自动聚集时有效	number	-1
selectionStart	光标起始位置，自动聚集时有效	number	-1
placeholder	占位符	string	-
layout	标题输入框布局方式，可选值'vertical' 'horizontal'	string	horizontal
placeholderStyle	指定 placeholder 的样式	string	-
lStyle	自定义样式	string	-
labelStyle	标签样式	string	-
indicatorStyle	计数器样式	string	-
innerStyle	内部textarea样式	string	``

Slots

名称	说明
label	标题

Events

事件名	说明	回调参数
change	输入内容变化时触发	value:string
blur	失去焦点时触发	event: UniTextareaBlurEvent
focus	获得焦点时触发	event: UniTextareaFocusEvent
keyboardheightchange	获得焦点时触发	event:UniInputKeyboardHeightChangeEvent
linechange	行高发生变化时触发	event: UniTextareaLineChangeEvent
confirm	点击完成时触发	event: UniInputConfirmEvent

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，uvue app不支持。

名称	默认值	描述
--l-textarea-vertical-padding	32rpx	-
--l-textarea-horizontal-padding	32rpx	-
--l-textarea-text-line-height	48rpx	-
--l-textarea-label-line-height	44rpx	-
--l-textarea-label-width	128rpx	-
--l-textarea-label-padding-right	$spacer	-
--l-textarea-label-padding-bottom	$spacer-xs	-
--l-textarea-indicator-text-line-height	40rpx	-
--l-textarea-indicator-text-padding-top	$spacer-xs	-
--l-textarea-indicator-text-align	right	-
--l-textarea-border-width	2rpx	-
--l-textarea-indicator-text-font-size	$spacer-sm	-
--l-textarea-label-font-size	14px	-
--l-textarea-label-large-font-size	16px	-
--l-textarea-text-font-size	16px	-
--l-textarea-placeholder-font-size	16px	-
--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-disabled-text-color	$text-color-4	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码