uniapp使用easyinput文本框显示输入的字数和限制的字数

uniapp使用easyinput文本框显示输入的字数和限制的字数

先上效果图:
在这里插入图片描述
整体代码如下:

<template><view class="nameInfoContent"><uni-easyinput class="uni-mt-5" suffixIcon="checkmarkempty" v-model="memberName" placeholder="请输入新昵称"maxlength="24" @iconClick="submit" @input="handleInput"></uni-easyinput><view class="wordsNum"><view class="tipLips">支持2-24位中英文数字,符号-和_</view><view class="juedui">{{ inputValueLength ? inputValueLength : 0  }}/24 </view></view></view>
</template><script>export default {data() {return {memberName: '',inputValueLength: ''}},methods: {handleInput(e) {this.inputValueLength = parseInt(e.length);}}}
</script><style lang="scss" scoped>.nameInfoContent {position: relative;padding: 32rpx;min-height: calc(100vh - 152rpx);.wordsNum {display: flex;justify-content: space-between;margin-top: 24rpx;.tipLips,.juedui {font-size: 24rpx;color: #999999;}}}
</style>

Live life to the fullest by drawing on your strengths.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/458245.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MyBatis源码】SqlSessionFactoryBuilder源码分析

文章目录 概述类结构从 InputStream 创建 SqlSessionFactoryXMLConfigBuilder构建ConfigurationXMLConfigBuilder初始化方法parse()方法parseConfiguration属性&#xff08;properties&#xff09; 概述 SqlSessionFactory 是 MyBatis 的核心接口之一&#xff0c;提供创建 Sql…

vue通过JSON文件生成WPML文件源码

可以使用封装的json解析器进行JSON数据获取&#xff0c;读取点的经度、维度、高程等数据&#xff0c;再使用对应的WPML文件生成函数使用该源码下载WPML文件&#xff08;固定WPML生成&#xff1a;js模板式生成大疆上云wpml文件&#xff08;含详细注释&#xff0c;已封装成函数&a…

(7) cuda异常处理

文章目录 上节概要异常处理代码 上节概要 上一节 block_width 64的时候&#xff0c;64644096 > 1024&#xff08;一个block里面最多只能有1024个线程&#xff0c;所以这里计算会有问题&#xff09; 异常处理 __FILE__: 编译器内部定义的一个宏。表示的是当前文件的文件…

【C++单调栈 贡献法】907. 子数组的最小值之和|1975

本文涉及的基础知识点 C单调栈 LeetCode907. 子数组的最小值之和 给定一个整数数组 arr&#xff0c;找到 min(b) 的总和&#xff0c;其中 b 的范围为 arr 的每个&#xff08;连续&#xff09;子数组。 由于答案可能很大&#xff0c;因此 返回答案模 109 7 。 示例 1&#x…

项目:Boost 搜索引擎

项目&#xff1a;Boost 搜索引擎 1、项目背景 公司&#xff1a;百度、360、搜狗、谷歌 …站内搜索&#xff1a;搜索的数据更垂直&#xff08;相关&#xff09;&#xff0c;数据量小 2、整体框架 3、技术栈和项目环境 技术栈&#xff1a;C/C C11&#xff0c;STL&#xff0c;jso…

error Unexpected mutation of “xxxxx“ prop

错误是在进行 eslint 检查的时候触发的&#xff0c;这个错误的原因是我们在子组件中改变了父组件传递过来的 props 解决方法一&#xff1a; 不改变父组件传递过来的 props&#xff0c;如果需要改变父组件传递过来的值&#xff0c;可以使用 defineModel() 进行接收值&#xff…

【零售和消费品&软件包】快递包装类型检测系统源码&数据集全套:改进yolo11-HSPAN

改进yolo11-EfficientHead等200全套创新点大全&#xff1a;快递包装类型检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.24 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统…

STM32第15章 RCC-使用HSE/HSI配置时钟

时间:2024.10.21-10.23 参考资料: 《零死角玩转STM32》“RCC-使用HSE/HIS配置时钟”章节 TIPS: 从前面的历程中我们知道,程序在启动的时候会执行汇编文件,汇编文件里会调用System_Init(固件库编程的函数),它里面会把时钟初始化成72M,因此前面我们在用固件库写程序的…

MSR寄存器独有的还是共享的

英特尔白皮书Volume 4: Model-Specific Registers 这一章列出了不同英特尔处理器系列的 MSR&#xff08;模型特定寄存器&#xff09;。所有列出的 MSR 都可以使用 RDMSR 和 WRMSR 指令进行读取和写入。MSR 的作用域定义了访问相同 MSR 的处理器集合&#xff0c;具体如下&#x…

栈和队列(上)-栈

1. 栈的概念 引入: 我们平时拿羽毛球,是从盒子顶部的羽毛球开始拿的,而顶部的元素是我们最后放进去的. 栈: 一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后…

温泉押金原路退回系统, 押金+手牌+电子押金单——未来之窗行业应用跨平台架构

一、温泉手牌收押金必要性 1. 防止手牌丢失&#xff1a;手牌是顾客在温泉内存储个人物品和进出更衣室的重要凭证。收押金可以让顾客更加重视手牌&#xff0c;降低丢失的概率。比如说&#xff0c;有的顾客可能会因为粗心大意随手放置手牌&#xff0c;如果没有押金的约束&…

STM32之外部中断(实验对射式传感器计次实验)

外部中断配置 #include "stm32f10x.h" // Device headeruint16_t CountSensor_Count;void CountSensor_Init(void) {//RCC--> GPIO--> AFIO--> EXTI--> NVIC五步RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOB, ENABLE); //开启GPIOB时…

图---java---黑马

图 概念 图是由顶点(vertex)和边(edge)组成的数据结构&#xff0c;例如 该图有四个顶点&#xff1a;A&#xff0c;B&#xff0c;C&#xff0c;D以及四条有向边&#xff0c;有向图中&#xff0c;边是单向的。 有向 vs 无向 如果是无向图&#xff0c;那么边是双向的&#x…

aarch64-opencv341交叉编译,并在arm上部署helloopencv

背景 当需要在jetson xavier nx或者rk 3562等平台上开发关于视觉检测的工程时&#xff0c;由于arm板子资源不足或者不能联网等原因&#xff0c;通常在虚拟机上利用交叉编译器编译得到可执行程序&#xff0c;然后部署到arm板上。 aarch64-opencv341交叉编译 ubuntu虚拟机中先…

【Linux】环境下升级redis

一、摘要 最近漏洞扫描服务器发现&#xff0c;Redis 缓冲区溢出漏洞(CVE-2024-31449)&#xff0c;解决办法redis更新到6.2.16、7.2.6或7.4.1及以上版本。 二、漏洞描述 漏洞描述&#xff1a;经过身份验证的用户可能会使用特制的 Lua 脚本来触发位库中的堆栈缓冲区溢出&#…

Kaggle比赛复盘

Kaggle - LLM Prompt Recovery 解决方案报告 比赛背景/目标 大型语言模型&#xff08;Large Language Models&#xff0c;LLMs&#xff09;通常被用于改写或对文本进行风格修改。本次Kaggle竞赛的目标是根据给定的改写文本&#xff0c;还原用于将原始文本转换为改写文本的LLM…

MetaArena推出《Final Glory》:引领Web3游戏技术新风向

随着区块链技术的日益成熟&#xff0c;Web3游戏成为了游戏产业探索的新方向&#xff0c;将去中心化经济与虚拟世界结合在一起&#xff0c;形成了一个全新的生态体系。然而&#xff0c;尽管Web3游戏展示了令人兴奋的可能性&#xff0c;但其背后的技术障碍依旧严峻&#xff0c;特…

Android Activity SingleTop启动模式使用场景

通知栏 当用户点击通知栏中的通知时,可以使用单顶启动模式来打开对应的活动,并确保只有一个实例存在。 简单集成极光推送 创建应用 获取appkey参数 切换到极光工作台 极光sdk集成 Project 根目录的主 gradle 配置 Module 的 gradle 配置 Jpush依赖配置 配置推送必须…

华为原生鸿蒙操作系统:我国移动操作系统的新篇章

华为原生鸿蒙操作系统&#xff1a;我国移动操作系统的新篇章 引言 在移动操作系统领域&#xff0c;苹果iOS和安卓系统一直占据主导地位。然而&#xff0c;随着华为原生鸿蒙操作系统的正式发布&#xff0c;这一格局正在发生深刻变化。作为继苹果iOS和安卓系统后的全球第三大移动…