uView Textarea 文本域

简介: 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>
相关文章
|
3月前
Vue3文本域(Textarea)
这是一个基于 Vue3 的可自定义文本域组件 (`Textarea`),具备多种实用功能,如自适应内容高度、清除图标、字数统计及禁用状态等。
129 2
Vue3文本域(Textarea)
|
5月前
|
JavaScript
解决Elementui输入框(text)与文本域(textarea)字体不一样问题
解决Elementui输入框(text)与文本域(textarea)字体不一样问题
415 5
|
5月前
|
JavaScript
使用layui checkbox复选框样式实现单选功能
使用layui checkbox复选框样式实现单选功能
399 0
|
6月前
|
移动开发 JavaScript 小程序
uView Radio 单选框
uView Radio 单选框
193 0
|
6月前
|
移动开发 JavaScript 小程序
uView Checkbox 复选框
uView Checkbox 复选框
134 0
|
6月前
|
移动开发 小程序 JavaScript
uView Input 输入框
uView Input 输入框
90 0
elementui中el-checkbox 选中时的详细介绍
elementui中el-checkbox 选中时的详细介绍
|
前端开发
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
188 0
|
测试技术 容器
Easyui datagrid 扩展单元格textarea editor
Easyui datagrid 扩展单元格textarea editor
296 0