uv-ui

# Textarea 文本域

✈

组件名：uv-textarea

点击下载&安装 (opens new window)

文本域此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

<template>
	<uv-textarea v-model="value" placeholder="请输入内容"></uv-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		}
	}
</script>

# 字数统计

设置count属性实现字数统计

<template>
	<uv-textarea v-model="value" count placeholder="请输入内容"></uv-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		}
	}
</script>

# 自动增高

设置autoHeight属性实现自动增高

<template>
	<uv-textarea v-model="value" :maxlength="-1" autoHeight placeholder="请输入内容"></uv-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		}
	}
</script>

# 禁用状态

设置disabled属性实现进行禁用，您也可以动态设置是否禁用

<template>
	<uv-textarea v-model="value" disabled placeholder="请输入内容"></uv-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		}
	}
</script>

# 下划线模式

设置border="bottom"属性单独设置底部下划线

<template>
	<uv-textarea v-model="value" border="bottom" placeholder="请输入内容"></uv-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		}
	}
</script>

# 格式化处理

如有需要，可以通过formatter参数编写自定义格式化规则。

<template>
	<uv-textarea v-model="value" :formatter="formatter" placeholder="请输入内容"></uv-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		},
		methods: {
			formatter(value) {
				// 让输入框只能输入数值，过滤其他字符
				return value.replace(/[^0-9]/ig, "")
			}
		}
	}
</script>

注意：

某些平台可能不支持props传递函数，为了兼容性内置有方法，可以通过setFormatter方法设置规则。如下：

onReady() {
	//onReady 为uni-app支持的生命周期之一
	this.$refs.textarea.setFormatter(this.formatter)
}

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Textarea Props

部分参数可以参考uniapp官方textarea的文档 (opens new window)

参数 说明 类型 默认值 可选值
value / v-model 输入框的内容 String | String - -
placeholder 输入框为空时占位符 Number | String - -
height 输入框高度 String | Number 70 -
confirmType 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效 String done -
confirm-hold 点击键盘右下角按钮时是否保持键盘不收起 Boolean false true | false
disabled 是否禁用 Boolean false true | false
count 是否显示统计字数 Boolean false true | false
focus 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现 Boolean false true | false
autoHeight 是否自动增加高度，设置auto-height时，height不生效 Boolean false true | false
ignoreCompositionEvent 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件 Boolean true true | false
fixed 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true Boolean false true | false
cursorSpacing 指定光标与键盘的距离 Number 0 -
cursor 指定focus时的光标位置 Number | String - -
showConfirmBar 是否显示键盘上方带有”完成“按钮那一栏， Boolean true true | false
selectionStart 光标起始位置，自动聚焦时有效，需与selection-end搭配使用 Number -1 -
selectionEnd 光标结束位置，自动聚焦时有效，需与selection-start搭配使用 Number -1 -
adjustPosition 键盘弹起时，是否自动上推页面 Boolean true true | false
disableDefaultPadding 是否去掉 iOS 下的默认内边距，只微信小程序有效 Boolean false true | false
holdKeyboard focus时，点击页面的时候不收起键盘，只微信小程序有效 Boolean false true | false
maxlength 最大输入长度，设置为 -1 的时候不限制最大长度，设置 -1 则设置的 count 失效。（注意：maxlength都是小写） String | Number 140 -
border 边框类型，surround-四周边框，none-无边框，bottom-底部边框。如果需要自定义边框，可以设置为none，然后通过customStyle自定义 String surround surround | bottom
placeholderClass 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ String textarea-placeholder -
placeholderStyle 指定placeholder的样式，字符串/对象形式，如"color: red;" String | Object color: #c0c4cc -
formatter 输入过滤或格式化函数(如需兼容微信小程序，则只能通过setFormatter方法) Function null -
textStyle 自定义文本样式 Object - -
countStyle 自定义统计数字的样式 Object - -
customStyle 自定义外部样式 Object -

# Textarea Methods

方法名 说明
setFormatter 为兼容微信小程序而暴露的内部方法，见上方说明

# Textarea Events

事件名 说明 回调参数
@focus 输入框聚焦时触发 event.detail = { value, height }，height 为键盘高度
@blur 输入框失去焦点时触发 event.detail = {value, cursor}
@linechange 输入框行数变化时调用 event.detail = {height: 0, heightRpx: 0, lineCount: 0}
@input 当键盘输入时，触发 input 事件 e.detail.value
@confirm 点击完成时， 触发 confirm 事件 e
@keyboardheightchange 键盘高度发生变化的时候触发此事件 e

← Checkbox 复选框 →