本文主要是介绍uView Textarea 文本域，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文本域此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等
注意：
由于在nvue下，u-textarea名称被uni-app官方占用，在nvue页面中请使用u--textarea名称，在vue页面中使用u--textarea或者u-textarea均可。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
#基本使用
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<script>export default {data() {return {value1: '',}},}
</script>
copy
#字数统计
设置count属性实现字数统计
<u--textarea v-model="value2" placeholder="请输入内容" count ></u--textarea>
<script>export default {data() {return {value2: '统计字数',}},}
</script>
copy
#自动增高
设置autoHeight属性实现自动增高
<u--textarea v-model="value3" placeholder="请输入内容" autoHeight ></u--textarea>
<script>export default {data() {return {value3: '',}},}
</script>
copy
#禁用状态
设置disabled属性实现进行禁用，您也可以动态设置是否禁用
<u--textarea v-model="value4" placeholder="文本域已被禁用" disabled count></u--textarea>
<script>export default {data() {return {value4: '',}},}
</script>
copy
#下划线模式
设置border="bottom"属性单独设置底部下划线
<u--textarea v-model="value5" placeholder="请输入内容" border="bottom"></u--textarea>
<script>export default {data() {return {value5: '',}},}
</script>
copy
#格式化处理
如有需要，可以通过formatter参数编写自定义格式化规则。
注意：
微信小程序不支持通过props传递函数参数，所以组件内部暴露了一个setFormatter方法用于设置格式化方法，注意在页面的onReady生命周期获取ref再操作。
<template><u-textarea v-model="value" :formatter="formatter" ref="textarea"></u-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>这篇关于uView Textarea 文本域的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
