当前位置: 首页 > news >正文

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 | Number70-
confirmType设置键盘右下角按钮的文字,仅微信小程序,App-vue和H5有效Stringdone-
disabled是否禁用Booleanfalsetrue
count是否显示统计字数Booleanfalsetrue
focus是否自动获取焦点,nvue不支持,H5取决于浏览器的实现Booleanfalsetrue
autoHeight是否自动增加高度Booleanfalsetrue
ignoreCompositionEvent 2.0.34是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件,且在文本合成期间会触发 input 事件Booleantruefalse
fixed如果textarea是在一个position:fixed的区域,需要显示指定属性fixed为trueBooleanfalsetrue
cursorSpacing指定光标与键盘的距离Number0-
cursor指定focus时的光标位置Number | String--
showConfirmBar是否显示键盘上方带有”完成“按钮那一栏,Booleantruefalse
selectionStart光标起始位置,自动聚焦时有效,需与selection-end搭配使用Number-1-
selectionEnd光标结束位置,自动聚焦时有效,需与selection-start搭配使用Number-1-
adjustPosition键盘弹起时,是否自动上推页面Booleantruefalse
disableDefaultPadding是否去掉 iOS 下的默认内边距,只微信小程序有效Booleanfalsetrue
holdKeyboardfocus时,点击页面的时候不收起键盘,只微信小程序有效Booleanfalsetrue
maxlength最大输入长度,设置为 -1 的时候不限制最大长度String | Number140-
border边框类型,surround-四周边框,none-无边框,bottom-底部边框Stringsurroundbottom
placeholderClass指定placeholder的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/Stringtextarea-placeholder-
placeholderStyle指定placeholder的样式,字符串/对象形式,如"color: red;"String | Objectcolor: #c0c4cc-
formatter输入过滤或格式化函数(如需兼容微信小程序,则只能通过setFormatter方法)Functionnull-

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

LLM、AGI、多模态AI 篇三:微调模型

文章目录 系列LLM的几个应用层次Lora技术其他微调技术FreezeP-TuningQLoRA指令设计构建高质量的数据微调步骤系列 LLM、AGI、多模态AI 篇一:开源大语言模型简记 LLM、AGI、多模态AI 篇二:Prompt编写技巧 LLM、AGI、多模态AI 篇三...

IPC之十二:使用libdbus在D-Bus上异步发送/接收信号的实例

IPC 是 Linux 编程中一个重要的概念&#xff0c;IPC 有多种方式&#xff0c;本 IPC 系列文章的前十篇介绍了几乎所有的常用的 IPC 方法&#xff0c;每种方法都给出了具体实例&#xff0c;前面的文章里介绍了 D-Bus 的基本概念以及调用远程方法的实例&#xff0c;本文介绍 D-Bus…...

ES6之生成器(Generator)

✨ 专栏介绍 在现代Web开发中&#xff0c;JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性&#xff0c;还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言&#xff0c;JavaScript具有广泛的应用场景&#x…...

Matlab技巧[绘画逻辑分析仪产生的数据]

绘画逻辑分析仪产生的数据 逻分上抓到了ADC数字信号,一共是10Bit,12MHZ的波形: 这里用并口协议已经解析出数据: 导出csv表格数据(这个数据为补码,所以要做数据转换): 现在要把这个数据绘制成波形,用Python和表格直接绘制速度太慢了,转了一圈发现MATLAB很好用,操作方法如下:…...

Go面试题学习

1.并发安全性 Go语言中的并发安全性是什么&#xff1f;如何确保并发安全性&#xff1f; 并发安全性是指在并发编程中&#xff0c;多个goroutine对共享资源的访问不会导致数据竞争和不确定的结果。 使用互斥锁&#xff08;Mutex&#xff09;&#xff1a;通过使用互斥锁来保护…...

SQL效率-查询条件需避免使用函数处理索引字段

一个sql效率的问题 问题 假设created_at 是date类型、是索引&#xff0c;那么以下2种方式有没效率差异&#xff1a; WHERE TO_CHAR(created_at, ‘YYYY-MM-DD’) ‘2020-02-01’WHERE created_at TO_DATE(‘2020-02-01’ , ‘YYYY-MM-DD’) DBA回复 有的&#xff0c;第一…...

【Spring 篇】Spring:轻松驾驭 Java 世界的利器

在 Java 开发领域&#xff0c;Spring 框架无疑是一颗璀璨的明星&#xff0c;它不仅提供了全面的企业级特性&#xff0c;还为开发者提供了简便而强大的开发方式。本文将深入探讨 Spring 框架的简介、配置和快速入门&#xff0c;带你轻松驾驭 Java 世界的利器。 Spring 简介 Sp…...

八个LOGO素材网站推荐分享

即时设计资源广场 在UI界面设计中&#xff0c;为了找到合适的图标icon&#xff0c;你有没有尝试过翻遍整个网络&#xff0c;找到自己想要的&#xff0c;却无法下载或收费使用&#xff1f;最后&#xff0c;只收集图标icon材料需要半天时间。专业设计师使用的图标icon设计材料“…...

React格式化规范

React并没有特定的格式要求&#xff0c;它允许开发者根据自己的喜好和项目需求来选择代码的格式化风格。然而&#xff0c;在React社区中有一些常见的约定和最佳实践&#xff0c;以下是一些常用的格式化规范和建议&#xff1a; 缩进&#xff1a;使用2个或4个空格来进行缩进&…...

如何利用Conda管理多种虚拟环境与Jupyter Notebook内核切换

写在开头 在数据科学与机器学习领域,项目之间可能存在不同的依赖关系和版本要求。为了有效管理这些差异,使用虚拟环境成为一种标准实践。本文将介绍如何利用Conda这一强大的环境管理工具,结合Jupyter Notebook,使得在不同项目之间灵活切换变得轻而易举。 2. Conda简介 2…...

博客摘录「 什么是QPS、TPS、吞吐量?- 高并发名词概念」2024年1月5日

1.什么是高并发&#xff1f; 高并发&#xff08;High Concurrency&#xff09;。通常是指系统在短时间内的大量操作。 高并发相关的常见指标有&#xff1a;QPS、TPS、吞吐量、并发数等。 2.QPS&#xff08;Query Per Second&#xff09; QPS每秒查询率&#xff0c;是指系统…...

PTA——逆序的三位数

程序每次读入一个正3位数&#xff0c;然后输出按位逆序的数字。注意&#xff1a;当输入的数字含有结尾的0时&#xff0c;输出不应带有前导的0。比如输入700&#xff0c;输出应该是7。 输入格式&#xff1a; 每个测试是一个3位的正整数。 输出格式&#xff1a; 输出按位逆序…...

ChatGPT怎么帮我上班的

1.解放生产力 1&#xff09;标准格式&#xff0c;完美输出。GPT对于公文等具有一定标准格式的文件&#xff0c;可以进行完美仿写&#xff0c;随随便便以假乱真那都是小菜一碟&#xff0c;这对于经常要开展规范成文的人来说&#xff0c;简直就是个福音&#xff0c;只要前期调教…...

WPF 漂亮长方体、正文体简单实现方法 Path实现长方体 正方体方案 WPF快速实现长方体、正方体的方法源代码

这段XAML代码在WPF中实现了一个类似长方体视觉效果的图形 声明式绘制&#xff1a;通过Path、PathGeometry和PathFigure等元素组合&#xff0c;能够以声明方式精确描述长方体每个面的位置和形状&#xff0c;无需编写复杂的绘图逻辑&#xff0c;清晰直观。 层次结构与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 浏览器中&#xff0c;您可以使用“实时字幕”功能自动为视频、播客、游戏、直播、视频通话或其他音频媒体生成字幕。音频和字幕均在本地处理&#xff0c;并会保…...

php接口优化 使用curl_multi_init批量请求

PHP使用CURL同时抓取多个URL地址 抓取多个URL地址是Web开发中常见的需求&#xff0c;使用PHP的curl库可以简化这个过程。本文将详细介绍如何使用PHP的curl库同时请求多个URL地址&#xff0c;并提供具体的代码案例和注释。 curl库介绍 curl是一个常用的开源网络传输工具&…...

联邦拜占庭共识算法的工作流程

1 前言 联邦拜占庭共识算法&#xff08;Federated Byzantine Agreement&#xff0c;简称FBA&#xff09;是一种解决分布式系统中拜占庭问题的共识算法&#xff0c;是拜占庭容错共识算法里的其中一种&#xff0c;主要应用于区块链技术中。这种算法允许系统内部的各种节点自由进…...

国家开放大学形成性考核 统一考试 学习资料参考

试卷代号&#xff1a;11119 机械CAD/CAM 参考试题 一、单项选择题&#xff08;从所给的四个选项中&#xff0c;找出你认为是正确的答案&#xff0c;将其编号填入括号内。每小题3分&#xff0c;共45分&#xff09; 1.下述CAD/CAM过程的概念中&#xff0c;属于CAM范畴的是&am…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...