微信小程序 限制字数文本域框组件封装
微信小程序 限制字数文本域框
介绍:展示类组件
导入
在app.json或index.json中引入组件
"usingComponents": {"text-field":"/pages/components/text-field/index"}
代码使用
<text-field maxlength="500" bindtabsItemChange="getSonNameChange"></text-field>
组件代码
index.wxml
/* pages/components/text-field/index.wxml */
<view><textarea class="textarea-bg " maxlength='{{maxlength}}' placeholder="请输入遇到的问题" value="{{information}}" bindinput="getDataBindTap"><view class='word'>{{lastArea}}/{{maxlength}}</view></textarea>
</view>
index.wxss
/* pages/components/text-field/index.wxss */
.textarea-bg {background-color: #F7F8FA;width: 85%;margin: 20rpx auto;padding:15rpx;}.word{position: absolute;bottom:30rpx;right:30rpx;}
index.js
// pages/components/text-field/index.js
Component({/*** 组件的属性列表*/properties: {// 最大的输入字数maxlength:{type:String,value:"150" }},/*** 组件的初始数据*/data: {information:"",lastArea:"0"},/*** 组件的方法列表*/methods: {getDataBindTap (e) {var information = e.detail.value;//输入的内容var lastArea = e.detail.value.length;//输入内容的长度var that = this;that.setData({information: information,lastArea: lastArea})const sonData={information:information,lastArea:lastArea}that.triggerEvent('tabsItemChange',sonData)},}
})
父组件代码
说明:使用子组件传父组件将输入的value值和长度传给父组件
// pages/shopping/shopping.js
Page({/*** 页面的初始数据*/data: {information:"",lastArea:"0"},getSonNameChange (e) {// 获取子组件传过来的数据console.log(e)const { information, lastArea} = e.detail console.log(information,lastArea)this.setData({information:information,lastArea:lastArea})},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},
})

注:最近重复代码写的有点多,特此封装!!
相关文章:
微信小程序 限制字数文本域框组件封装
微信小程序 限制字数文本域框 介绍:展示类组件 导入 在app.json或index.json中引入组件 "usingComponents": {"text-field":"/pages/components/text-field/index"}代码使用 <text-field maxlength"500" bindtabsIt…...
阿里国际站(直通车)
1.国际站流量 2.直通车即P4P(pay for performance点击付费) 2.1直通的含义:按点击付费,通过自助设置多维度展示产品信息,获得大量曝光吸引潜在买家。 注意:中国大陆和尼日利尼地区点击不扣费。 2.2扣费规…...
C# GC机制
在C#中,垃圾回收(Garbage Collection,简称GC)是CLR(公共语言运行时)的一个重要部分,用于自动管理内存。它会自动释放不再使用的对象所占用的内存,避免内存泄漏,减少程序员…...
wpf devexpress在未束缚模式中生成Tree
TreeListControl 可以在未束缚模式中没有数据源时操作,这个教程示范如何在没有数据源时创建tree 在XAML生成tree 创建ProjectObject类实现数据对象显示在TreeListControl: public class ProjectObject {public string Name { get; set; }public string Executor {…...
Python利器:os与chardet读取多编码文件
在数据处理中会遇到读取位于不同位置的文件,每个文件所在的层级不同,而且每个文件的编码类型各不相同,那么如何高效地读取文件呢? 在读取文件时首先需要获取文件的位置信息,然后根据文件的编码类型来读取文件。本文将使用os获取文件路径,使用chardet得到文件编码类型。 …...
微服务和注册中心
微服务和注册中心是紧密相关的概念,可以说注册中心是微服务架构中必不可少的一部分。 在微服务架构中,系统被拆分成了若干个独立的服务,因此服务之间需要进行通信和协作。为了实现服务的发现和调用,需要一个中心化的注册中心来进…...
吴恩达《机器学习》9-1-9-3:反向传播算法、反向传播算法的直观理解
一、正向传播的基础 在正向传播中,从神经网络的输入层开始,通过一层一层的计算,最终得到输出层的预测结果。这是一种前向的计算过程,即从输入到输出的传播。 二、反向传播算法概述 反向传播算法是为了计算代价函数相对于模型参数…...
Java 算法篇-链表的经典算法:判断回文链表、判断环链表与寻找环入口节点(“龟兔赛跑“算法实现)
🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 链表的创建 2.0 判断回文链表说明 2.1 快慢指针方法 2.2 使用递归方式实现反转链表方法 2.3 实现判断回文链表 - 使用快慢指针与反转链表方法 3.0 判断环链表说明…...
【JS】Chapter13-构造函数数据常用函数
站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 (十三)构造函数&数据常用函数 1. 深入对象 1.1 创建对象三种方式 利用对象字面量创建对象const o {…...
06-流媒体-YUV数据在SDL控件显示
整体方案: 采集端:摄像头采集(YUV)->编码(YUV转H264)->写封装(H264转FLV)->RTMP推流 客户端:RTMP拉流->解封装(FLV转H264)…...
对象和数据结构
文章目录 前言一、从链式调用说起二、数据抽象三、数据、对象的反对称性四、得墨忒尔律五、数据传送对象总结 前言 代码整洁之道读书随笔,第六章 一、从链式调用说起 面向对象语言中常用的一种调用形式,链式调用,是一种较受推崇的编码风格&…...
ESP32-BLE基础知识
一、存储模式 两种存储模式: 大端存储:低地址存高字节,如将0x1234存成[0x12,0x34]。小端存储:低地址存低字节,如将0x1234存成[0x34,0x12]。 一般来说,我们看到的一些字符串形式的数字都是大端存储形式&a…...
vscode终端npm install报错
报错如下: npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion1, but package-lock.json was generated for lockfileVersion2. Ill try to do my best with it! npm ERR! code EPERM npm ERR! syscall open npm ERR! errno -4048…...
雪花算法的使用
雪花算法的使用(工具类utils) import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component;// 雪花算法 Component public class SnowflakeUtils { // Generated ID: 1724603634882318341; // Generated ID: 1724603…...
flink源码分析之功能组件(一)-metrics
简介 本系列是flink源码分析的第二个系列,上一个《flink源码分析之集群与资源》分析集群与资源,本系列分析功能组件,kubeclient,rpc,心跳,高可用,slotpool,rest,metric,future。其中kubeclient上一个系列介绍过,本系列不在介绍。 本文介绍flink metrics组件,metric…...
Nginx反向代理和负载均衡
1.反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一…...
基于SSM的供电公司安全生产考试系统设计与实现
末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:Vue 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目:是 目录…...
大数据-之LibrA数据库系统告警处理(ALM-12055 证书文件即将过期)
告警解释 系统每天二十三点检查一次当前系统中的证书文件,如果当前时间距离过期时间不足告警阈值天数,则证书文件即将过期,产生该告警。告警阈值天数的配置请参考《管理员指南》的“配置证书即将过期告警阈值”章节。 当重新导入一个正常证…...
应试教育导致学生迷信标准答案惯性导致思维僵化-移动机器人
移动机器人课程群实践创新的困境与突围 一、引言 随着科技的快速发展,工程教育变得越来越重要。然而,传统的应试教育模式往往侧重于理论知识的传授,忽视了学生的实践能力和创新精神的培养。这在移动机器人课程群的教学中表现得尤为明显。本文…...
【运维篇】5.4 Redis 并发延迟检测
文章目录 0.前言Redis工作原理可能引起并发延迟的常见操作和命令并发延迟检测分析和解读监控数据:优化并发延迟的策略 1. 检查CPU情况2. 检查网络情况3. 检查系统情况4. 检查连接数5. 检查持久化 :6. 检查命令执行情况 0.前言 Redis 6.0版本之前其使用单…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
消防一体化安全管控平台:构建消防“一张图”和APP统一管理
在城市的某个角落,一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延,滚滚浓烟弥漫开来,周围群众的生命财产安全受到严重威胁。就在这千钧一发之际,消防救援队伍迅速行动,而豪越科技消防一体化安全管控平台构建的消防“…...
