gxt_app/uni_modules/lime-textarea/readme_old.md

lime-textarea 多行文本框

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

文档

🚀 textarea【站点1】 🌍 textarea【站点2】 🔥 textarea【站点3】

安装

插件市场导入即可，首次导入可能需要重新编译

查看示例

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

<!-- // 代码位于 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	true
classic	是否经典边框模式	boolean	false
disabled	是否禁用文本框	boolean	false
readonly	只读	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-padding-y	32rpx	-
--l-textarea-padding-x	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	-

打赏

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