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>