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>
目录
打赏
0
0
0
0
10
分享
相关文章
MySQL Binlog--事务日志和BINLOG落盘参数对磁盘IO的影响
MySQL Binlog--事务日志和BINLOG落盘参数对磁盘IO的影响
273 0
Android 自带的字体库、字体样式
Android 自带的字体库、字体样式
1581 0
Android 自带的字体库、字体样式
《深度揭秘!海森矩阵如何左右梯度下降算法》
梯度下降算法是机器学习中寻找函数最小值的核心方法,而海森矩阵作为二阶偏导数矩阵,在优化过程中扮演着关键角色。它不仅帮助判断函数的凸性,确保全局最优解的收敛,还通过优化搜索方向和动态调整学习率,提高算法的稳定性和收敛速度。深入理解海森矩阵,能显著提升梯度下降算法的性能,助力更高效的模型训练与优化。
156 4
|
11月前
Vue3文字提示(Tooltip)
这是一篇关于 Vue2 文字提示(Tooltip)组件的教程,支持多种自定义属性,如最大宽度、展示文本、提示文本、样式、背景色、箭头显示等,并提供了在线预览示例。组件通过监听插槽和 `requestAnimationFrame` 实现了延迟显示与隐藏效果。文章详细介绍了组件实现代码及在页面中的使用方法。
521 0
Vue3文字提示(Tooltip)
足球黑科技之AI与足球智能分析
最近的足球盛宴引发了球迷的狂欢,阿根廷对沙特的越位,日本对西班牙的出界球,葡萄牙对乌拉圭C罗是否碰到了球等热点事件是否引发了你的关注呢。其实在这些热点背后,离不开足球智能裁判的辅助,足球作为全世界最受欢迎的运动,也一直致力于和高科技的结合。此篇文章,给大家带来了足球视频智能分析,让我们一起看看AI是如何在足球运动中大放光彩的的吧!
1484 3
足球黑科技之AI与足球智能分析
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问