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>
相关文章
|
缓存 关系型数据库 MySQL
MySQL Binlog--事务日志和BINLOG落盘参数对磁盘IO的影响
MySQL Binlog--事务日志和BINLOG落盘参数对磁盘IO的影响
349 0
|
9月前
|
机器学习/深度学习 算法
《深度揭秘!海森矩阵如何左右梯度下降算法》
梯度下降算法是机器学习中寻找函数最小值的核心方法,而海森矩阵作为二阶偏导数矩阵,在优化过程中扮演着关键角色。它不仅帮助判断函数的凸性,确保全局最优解的收敛,还通过优化搜索方向和动态调整学习率,提高算法的稳定性和收敛速度。深入理解海森矩阵,能显著提升梯度下降算法的性能,助力更高效的模型训练与优化。
316 4
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
948 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
Vue3文字提示(Tooltip)
这是一篇关于 Vue2 文字提示(Tooltip)组件的教程,支持多种自定义属性,如最大宽度、展示文本、提示文本、样式、背景色、箭头显示等,并提供了在线预览示例。组件通过监听插槽和 `requestAnimationFrame` 实现了延迟显示与隐藏效果。文章详细介绍了组件实现代码及在页面中的使用方法。
717 0
Vue3文字提示(Tooltip)
|
SQL 存储 运维
Flink⼤状态作业调优实践指南:Flink SQL 作业篇
本文整理自俞航翔、陈婧敏、黄鹏程老师所撰写的大状态作业调优实践指南。由于内容丰富,本文中篇内容分享 Flink SQL 作业大状态导致反压的调优原理与方法。
70200 8
Flink⼤状态作业调优实践指南:Flink SQL 作业篇
|
消息中间件 关系型数据库 MySQL
从零玩转Docker之docker-compose快捷部署中间件2
从零玩转Docker之docker-compose快捷部署中间件
1564 0
|
JavaScript API
uniapp中uview组件库Toast 消息提示 的使用方法
uniapp中uview组件库Toast 消息提示 的使用方法
1575 2
|
移动开发 JavaScript 小程序
uView Tooltip 长按提示
uView Tooltip 长按提示
475 3
|
JSON 小程序 数据格式
uni-app 使用vscode开发uni-app
uni-app 使用vscode开发uni-app
710 0