当前位置: 首页 > 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…...

2401C++,实现文件服务器和聊天室

文件服务器 使用yalantinglibs,几行代码开发静态文件服务器 最近的workshop上的一个任务,就是实现一个文件服务器,只要设置下载目录之后,就可下载目录里面的文件. 看看用yalantinglibs怎么实现一个静态文件服务器的吧. coro_http::coro_http_server server(1, 9001); server.…...

【ESP-NOW 入门(ESP32 with Arduino IDE)】

ESP-NOW 入门(ESP32 with Arduino IDE) 1. 前言2. Arduino集成开发环境3. ESP-NOW 简介3.1 ESP-NOW 支持以下功能:3.2 ESP-NOW 技术还存在以下局限性:4. ESP-NOW 单向通信4.1 一个 ESP32 开发板向另一个 ESP32 开发板发送数据4.2 一个“主”ESP32 向多个 ESP32“slave”发送…...

PHP序列化总结2--常见的魔术方法

魔术方法的概念 PHP的魔术方法是一种特殊的方法&#xff0c;用于覆盖PHP的默认操作。它们以双下划线&#xff08;__&#xff09;开头&#xff0c;后面跟着一些特定的字符串&#xff0c;如__construct()、__destruct()、__get()等。这些魔术方法在对象执行特定操作时被自动调用…...

Docker 入门 ------容器互通以及Dockerfile

1. 端口映射以及容器互联 Docker 除了通过网络访问&#xff0c;还提供了两种很方便的功能来满足服务访问的基本需求&#xff1a; 允许映射容器内应用的服务端口到本地宿主主机互联机制实现多个容器间通过容器名来快速访问 1.1 容器映射实现访问容器 1.1.1 从外部访问容器应…...

AI绘图模型不会写字的难题解决了

介绍 大家好&#xff0c;最近有个开源项目比较有意思&#xff0c;解决了图像中不支持带有中文的问题。 https://github.com/tyxsspa/AnyText。 为什么不能带有中文&#xff1f; 数据集局限 Stable Diffusion的训练数据集以英文数据为主&#xff0c;没有大量包含其他语言文本的…...

vue-cli创建项目时由esLint校验导致报错或警告的问题及解决

vue-cli创建项目时由esLint校验导致报错或警告的问题及解决 一、万能办法 一、万能办法 //就是在报错的JS文件中第一行写上 /* eslint-disable */链接: https://www.yii666.com/blog/288808.html 其它的方法我遇见了再补充...

uniapp:实现手机端APP登录强制更新,从本地服务器下载新的apk更新,并使用WebSocket,实时强制在线用户更新

实现登录即更新&#xff0c;或实时监听更新 本文介绍的是在App打开启动的时候调用更新&#xff0c;点击下方链接&#xff0c;查看使用WebSocket实现实时通知在线用户更新。 uniapp&#xff1a;全局消息是推送&#xff0c;实现app在线更新&#xff0c;WebSocket&#xff0c;ap…...

设计循环队列——oj题622

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;LeetCode刷题|数据结构|Linux 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 题目要求&#xff1a;应该支持如下操作&#xff1a;示例&#xff1a;提示&#xff1a; 结构体定义队列的创建基本操作判断队列是否为空&#xf…...

阿里后端实习一面面经

阿里后端实习一面面经 项目中使用到了es&#xff0c;es的作用&#xff1f; elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 es中的重要概念&#xff1f; 群集&#xff1a;一个或多个节点…...

element-ui组件DatePicker日期选择器移动端兼容

element-ui组件DatePicker日期选择器移动端兼容 css /** 移动端展示 **/ media screen and (max-width: 500px) {.el-picker-panel__sidebar {width: 100%;}.el-picker-panel {width: 400px!important;}.el-picker-panel__content {width: 100%;}.el-picker-panel__body{marg…...

如何关闭网站/mac日本官网入口

base.superclass.constructor.call(this,config) 2011-11-11 15:49 4200人阅读 评论(2) 收藏 举报base.superclass.constructor.call(this,config); 这个意思就是调用父类的构造函数 作用域是当前子类 传入config参数 将来config中有什么属性 会为子类构造出什么属性...

中国互联网协会网站/能让手机流畅到爆的软件

在实际工作中经常遇到以下问题&#xff1a;邮件发送给错误的收件人&#xff0c;简而言之就是邮件发错了&#xff0c;如果遇到群发更麻烦。Exchange中提供了批量删除邮件功能&#xff0c;当用户发现发送错误后&#xff0c;管理员可以检索并删除指定的邮件。 案例任务&#xff1a…...

怎么查看一个网站是谁做的/怎样做app推广

Python之建模数值逼近篇–最小二乘拟合介绍系数ak的确定函数rk(x)r_k(x)rk​(x)的选取理解和区别样例介绍 曲线拟合问题的提法是&#xff0c;已知一组&#xff08;二维&#xff09;数据&#xff0c;即平面上的n个点(xi,yi)(x_{i},y_{i})(xi​,yi​),i1,2,…,n&#xff0c;xix_…...

网站服务合同模板/360搜索引擎网址

本节内容&#xff1a;1&#xff0c;计算机的发展史2&#xff0c;计算机的组成1&#xff0c;计算机的发展史1946年2月14日&#xff0c;由美国军方定制的世界上第一台电子计算机“电子数字积分计算机”(ENIAC Electronic Numerical And Calculator)在美国宾夕法尼亚大学问世了。E…...

域名历史记录查询/刷seo关键词排名软件

在 Google 上搜索 php mysql 电子注册程序&#xff0c;搜索引擎返回了教程、操作方法及代码片段&#xff0c;然而其中绝大部分结果还存在有缺陷的数据库声明&#xff0c;例如下面这个有问题的&#xff1a; // Dont do this! mysqli_query("SELECT * FROM user WHERE id …...

php做购物网站详情页的代码/58同城关键词怎么优化

昨天不小心操作什么&#xff0c;好象有修复2个客户的数据库&#xff0c;最后修复后也访问不了&#xff0c;最后慢慢的很多客户反应自己网站上不了&#xff0c;才知道原来整台服务器的access数据库都不能访问&#xff0c;我就百度啊、google都用找资料&#xff0c;可大多写的都差…...