uniapp中组件库的Textarea 文本域的丰富使用方法

目录
#平台差异说明
#基本使用
#字数统计
#自动增高
#禁用状态
#下划线模式
#格式化处理
API
#List Props
#Methods
#List Events
文本域此组件满足了可能出现的表单信息补充,编辑等实际逻辑的功能,内置了字数校验等
注意:
由于在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>
#字数统计
设置count属性实现字数统计
<u--textarea v-model="value2" placeholder="请输入内容" count ></u--textarea>
<script>export default {data() {return {value2: '统计字数',}},}
</script>
#自动增高
设置autoHeight属性实现自动增高
<u--textarea v-model="value3" placeholder="请输入内容" autoHeight ></u--textarea>
<script>export default {data() {return {value3: '',}},}
</script>
#禁用状态
设置disabled属性实现进行禁用,您也可以动态设置是否禁用
<u--textarea v-model="value4" placeholder="文本域已被禁用" disabled count></u--textarea>
<script>export default {data() {return {value4: '',}},}
</script>
#下划线模式
设置border="bottom"属性单独设置底部下划线
<u--textarea v-model="value5" placeholder="请输入内容" border="bottom"></u--textarea>
<script>export default {data() {return {value5: '',}},}
</script>
#格式化处理
如有需要,可以通过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>
API
#List Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| value | 输入框的内容 | String | String | - | - |
| placeholder | 输入框为空时占位符 | Number | String | - | - |
| height | 输入框高度 | String | Number | 70 | - |
| confirmType | 设置键盘右下角按钮的文字,仅微信小程序,App-vue和H5有效 | String | done | - |
| disabled | 是否禁用 | Boolean | false | true |
| count | 是否显示统计字数 | Boolean | false | true |
| focus | 是否自动获取焦点,nvue不支持,H5取决于浏览器的实现 | Boolean | false | true |
| autoHeight | 是否自动增加高度 | Boolean | false | true |
| ignoreCompositionEvent 2.0.34 | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件,且在文本合成期间会触发 input 事件 | Boolean | true | false |
| fixed | 如果textarea是在一个position:fixed的区域,需要显示指定属性fixed为true | Boolean | false | true |
| cursorSpacing | 指定光标与键盘的距离 | Number | 0 | - |
| cursor | 指定focus时的光标位置 | Number | String | - | - |
| showConfirmBar | 是否显示键盘上方带有”完成“按钮那一栏, | Boolean | true | false |
| selectionStart | 光标起始位置,自动聚焦时有效,需与selection-end搭配使用 | Number | -1 | - |
| selectionEnd | 光标结束位置,自动聚焦时有效,需与selection-start搭配使用 | Number | -1 | - |
| adjustPosition | 键盘弹起时,是否自动上推页面 | Boolean | true | false |
| disableDefaultPadding | 是否去掉 iOS 下的默认内边距,只微信小程序有效 | Boolean | false | true |
| holdKeyboard | focus时,点击页面的时候不收起键盘,只微信小程序有效 | Boolean | false | true |
| maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 | String | Number | 140 | - |
| border | 边框类型,surround-四周边框,none-无边框,bottom-底部边框 | String | surround | bottom |
| placeholderClass | 指定placeholder的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/ | String | textarea-placeholder | - |
| placeholderStyle | 指定placeholder的样式,字符串/对象形式,如"color: red;" | String | Object | color: #c0c4cc | - |
| formatter | 输入过滤或格式化函数(如需兼容微信小程序,则只能通过setFormatter方法) | Function | null | - |
#Methods
| 方法名 | 说明 |
|---|---|
| setFormatter | 为兼容微信小程序而暴露的内部方法,见上方说明 |
#List Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| focus | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度 | e |
| blur | 输入框失去焦点时触发,event.detail = {value, cursor} | e |
| linechange | 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} | e |
| input | 当键盘输入时,触发 input 事件 | e.detail.value |
| confirm | 点击完成时, 触发 confirm 事件 | e |
| keyboardheightchange | 键盘高度发生变化的时候触发此事件 | e |
相关文章:
uniapp中组件库的Textarea 文本域的丰富使用方法
目录 #平台差异说明 #基本使用 #字数统计 #自动增高 #禁用状态 #下划线模式 #格式化处理 API #List Props #Methods #List Events 文本域此组件满足了可能出现的表单信息补充,编辑等实际逻辑的功能,内置了字数校验等 注意: 由于…...
LLM、AGI、多模态AI 篇三:微调模型
文章目录 系列LLM的几个应用层次Lora技术其他微调技术FreezeP-TuningQLoRA指令设计构建高质量的数据微调步骤系列 LLM、AGI、多模态AI 篇一:开源大语言模型简记 LLM、AGI、多模态AI 篇二:Prompt编写技巧 LLM、AGI、多模态AI 篇三...
IPC之十二:使用libdbus在D-Bus上异步发送/接收信号的实例
IPC 是 Linux 编程中一个重要的概念,IPC 有多种方式,本 IPC 系列文章的前十篇介绍了几乎所有的常用的 IPC 方法,每种方法都给出了具体实例,前面的文章里介绍了 D-Bus 的基本概念以及调用远程方法的实例,本文介绍 D-Bus…...
ES6之生成器(Generator)
✨ 专栏介绍 在现代Web开发中,JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性,还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言,JavaScript具有广泛的应用场景&#x…...
Matlab技巧[绘画逻辑分析仪产生的数据]
绘画逻辑分析仪产生的数据 逻分上抓到了ADC数字信号,一共是10Bit,12MHZ的波形: 这里用并口协议已经解析出数据: 导出csv表格数据(这个数据为补码,所以要做数据转换): 现在要把这个数据绘制成波形,用Python和表格直接绘制速度太慢了,转了一圈发现MATLAB很好用,操作方法如下:…...
Go面试题学习
1.并发安全性 Go语言中的并发安全性是什么?如何确保并发安全性? 并发安全性是指在并发编程中,多个goroutine对共享资源的访问不会导致数据竞争和不确定的结果。 使用互斥锁(Mutex):通过使用互斥锁来保护…...
SQL效率-查询条件需避免使用函数处理索引字段
一个sql效率的问题 问题 假设created_at 是date类型、是索引,那么以下2种方式有没效率差异: WHERE TO_CHAR(created_at, ‘YYYY-MM-DD’) ‘2020-02-01’WHERE created_at TO_DATE(‘2020-02-01’ , ‘YYYY-MM-DD’) DBA回复 有的,第一…...
【Spring 篇】Spring:轻松驾驭 Java 世界的利器
在 Java 开发领域,Spring 框架无疑是一颗璀璨的明星,它不仅提供了全面的企业级特性,还为开发者提供了简便而强大的开发方式。本文将深入探讨 Spring 框架的简介、配置和快速入门,带你轻松驾驭 Java 世界的利器。 Spring 简介 Sp…...
八个LOGO素材网站推荐分享
即时设计资源广场 在UI界面设计中,为了找到合适的图标icon,你有没有尝试过翻遍整个网络,找到自己想要的,却无法下载或收费使用?最后,只收集图标icon材料需要半天时间。专业设计师使用的图标icon设计材料“…...
React格式化规范
React并没有特定的格式要求,它允许开发者根据自己的喜好和项目需求来选择代码的格式化风格。然而,在React社区中有一些常见的约定和最佳实践,以下是一些常用的格式化规范和建议: 缩进:使用2个或4个空格来进行缩进&…...
如何利用Conda管理多种虚拟环境与Jupyter Notebook内核切换
写在开头 在数据科学与机器学习领域,项目之间可能存在不同的依赖关系和版本要求。为了有效管理这些差异,使用虚拟环境成为一种标准实践。本文将介绍如何利用Conda这一强大的环境管理工具,结合Jupyter Notebook,使得在不同项目之间灵活切换变得轻而易举。 2. Conda简介 2…...
博客摘录「 什么是QPS、TPS、吞吐量?- 高并发名词概念」2024年1月5日
1.什么是高并发? 高并发(High Concurrency)。通常是指系统在短时间内的大量操作。 高并发相关的常见指标有:QPS、TPS、吞吐量、并发数等。 2.QPS(Query Per Second) QPS每秒查询率,是指系统…...
PTA——逆序的三位数
程序每次读入一个正3位数,然后输出按位逆序的数字。注意:当输入的数字含有结尾的0时,输出不应带有前导的0。比如输入700,输出应该是7。 输入格式: 每个测试是一个3位的正整数。 输出格式: 输出按位逆序…...
ChatGPT怎么帮我上班的
1.解放生产力 1)标准格式,完美输出。GPT对于公文等具有一定标准格式的文件,可以进行完美仿写,随随便便以假乱真那都是小菜一碟,这对于经常要开展规范成文的人来说,简直就是个福音,只要前期调教…...
WPF 漂亮长方体、正文体简单实现方法 Path实现长方体 正方体方案 WPF快速实现长方体、正方体的方法源代码
这段XAML代码在WPF中实现了一个类似长方体视觉效果的图形 声明式绘制:通过Path、PathGeometry和PathFigure等元素组合,能够以声明方式精确描述长方体每个面的位置和形状,无需编写复杂的绘图逻辑,清晰直观。 层次结构与ZIndex控制…...
Nginx(十三) 配置文件详解 - 反向代理(超详细)
本篇文章主要讲ngx_http_proxy_module和ngx_stream_proxy_module模块下各指令的使用方法。 1. 代理请求 proxy_pass 1.1 proxy_pass 代理请求 Syntax: proxy_pass URL; Default: — Context: location, if in location, limit_except 设置代理服务器的协议和地址以…...
谷歌浏览器启用实时字幕功能
在 Chrome 中使用“实时字幕”功能 - Google Chrome帮助 在 Chrome 中使用“实时字幕”功能 从计算机上的 Chrome 浏览器中,您可以使用“实时字幕”功能自动为视频、播客、游戏、直播、视频通话或其他音频媒体生成字幕。音频和字幕均在本地处理,并会保…...
php接口优化 使用curl_multi_init批量请求
PHP使用CURL同时抓取多个URL地址 抓取多个URL地址是Web开发中常见的需求,使用PHP的curl库可以简化这个过程。本文将详细介绍如何使用PHP的curl库同时请求多个URL地址,并提供具体的代码案例和注释。 curl库介绍 curl是一个常用的开源网络传输工具&…...
联邦拜占庭共识算法的工作流程
1 前言 联邦拜占庭共识算法(Federated Byzantine Agreement,简称FBA)是一种解决分布式系统中拜占庭问题的共识算法,是拜占庭容错共识算法里的其中一种,主要应用于区块链技术中。这种算法允许系统内部的各种节点自由进…...
国家开放大学形成性考核 统一考试 学习资料参考
试卷代号:11119 机械CAD/CAM 参考试题 一、单项选择题(从所给的四个选项中,找出你认为是正确的答案,将其编号填入括号内。每小题3分,共45分) 1.下述CAD/CAM过程的概念中,属于CAM范畴的是&am…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
C#学习第29天:表达式树(Expression Trees)
目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
