WU-UI

中文

English

中文

English

Appearance

Textarea 文本域 ​

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

平台兼容性 ​

App(vue)App(nvue)H5小程序VUE2VUE3
√√√√√√

基本使用 ​

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

字数统计 ​

设置 count 属性实现字数统计

vue
<template>
    <wu-textarea v-model="value2" placeholder="请输入内容" count></wu-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value2: '统计字数',
			}
		},
	}
</script>
<template>
    <wu-textarea v-model="value2" placeholder="请输入内容" count></wu-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value2: '统计字数',
			}
		},
	}
</script>

自动增高 ​

设置 autoHeight 属性实现自动增高

vue
<template>
    <wu-textarea v-model="value3" placeholder="请输入内容" autoHeight></wu-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value3: '',
			}
		},
	}
</script>
<template>
    <wu-textarea v-model="value3" placeholder="请输入内容" autoHeight></wu-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value3: '',
			}
		},
	}
</script>

禁用状态 ​

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

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

下划线模式 ​

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

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

格式化处理 ​

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

vue
<template>
    <wu-textarea v-model="value" :formatter="formatter" ref="textarea"></wu-textarea>
</template>

<script>
    export default {
        data() {
            return {
                value: ''
            }
        },
		onReady() {
			// 如果需要兼容微信小程序的话，需要用此写法
			this.$refs.textarea.setFormatter(this.formatter)
		},
        methods: {
            formatter(value) {
				// 让输入框只能输入数值，过滤其他字符
            	return value.replace(/[^0-9]/ig, "")
            }
        },
    }
</script>
<template>
    <wu-textarea v-model="value" :formatter="formatter" ref="textarea"></wu-textarea>
</template>

<script>
    export default {
        data() {
            return {
                value: ''
            }
        },
		onReady() {
			// 如果需要兼容微信小程序的话，需要用此写法
			this.$refs.textarea.setFormatter(this.formatter)
		},
        methods: {
            formatter(value) {
				// 让输入框只能输入数值，过滤其他字符
            	return value.replace(/[^0-9]/ig, "")
            }
        },
    }
</script>

API ​

Textarea Props ​

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

Textarea Methods ​

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

Textarea Event ​

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