文本域此组件满足了可能出现的表单信息补充,编辑等实际逻辑的功能,内置了字数校验等
注意:
由于在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>