【Utils-实用工具】1 - 根据字节限制输入长度

文章目录

  • 1. el-input输入框【根据字节限制输入长度】
    • 1.1 【封装方法】到utils中
    • 1.2 main.js中把【方法注入到原型】
    • 1.3 在vue总使用

1. el-input输入框【根据字节限制输入长度】

  • 需求:某个字段需要限制输出长度字符长度小于64个VARCHAR2(64)
  • 分析:
    – 这一眼就看出来是数据库的限制,数据库是根据字节做的限制,varchar2(64),就相当于varchar2(64 byte),表示最大字节数是64,该字段最多能容纳64个字节;
    – 而前端组件el-input的限制长度(maxlength)只能限制字符串的长度无法直接限制字节,所以我们封装了一个方法,按如下操作:

1.1 【封装方法】到utils中

我把限制字节的方法封装在通用方法 commonUtils.js中,下面是commonUtils.js的代码

// 输入字节长度限制 
//入参:value是输入框的值,limit是限制的字节长度
export function charLimitedInput(value,limit){let len = 0, j = 0; // len为字节数,j为字符数for (let i = 0; i < value.length; i++) {// 判断是否为多字节if (value.charCodeAt(i) > 127 || value.charCodeAt(i) == 94) {len += 2;j++;} else {len++;j++;}if (len > limit) {value = value.substring(0, j - 1);this.$message.warning('请输入不超过 ' + limit + ' 个字节。');break;}}return value;
}

1.2 main.js中把【方法注入到原型】

在main.js引用,然后注入到原型,以后可以直接使用该方法

// 引用
import {charLimitedInput} from "@/utils/commonUtils"// 注入原型
Vue.prototype.charLimitedInput = charLimitedInput

1.3 在vue总使用

<el-input v-model.trim="form.objectName" placeholder="请输入" clearable maxlength="64" @input="form.objectName = charLimitedInput(form.objectName,64)"/>

注:

  • 一个汉字 = 2个英文字母 = 2字节
  • 一个汉字 = 2字节
  • 1个英文字母 = 1字节

参考:1. el-input输入框根据字节限制输入长度(中文占两字节,数字英文占一字节)


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

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

相关文章

企业内网自建yum源 仓库 | nginx 反向代理方案

文章目录 1.背景概述 方案二 Nginx代理法1. 安装ngnix1.1 安装nginx并启用1.2 修改ngnix配置文件 2. 客户端修改repo文件3.客户端测试 1.背景概述 yum源是一个软件仓库&#xff0c;centos7 停更后&#xff0c;建议企业在内网自建软自己的软件仓库&#xff0c;一般有下列步骤&am…

Java设计模式 _行为型模式_备忘录模式

一、备忘录模式 1、备忘录模式 备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为型模式。通过保存一个对象的某个状态&#xff0c;以便在适当的时候恢复对象。 2、实现思路 &#xff08;1&#xff09;、定义记录数据的格式规范。 &#xff08;2&#xff09;、编…

pyqt Qtreeview分层控件

pyqt Qtreeview分层控件 介绍效果代码 介绍 QTreeView 是 PyQt中的一个控件&#xff0c;它用于展示分层数据&#xff0c;如目录结构、文件系统等。QTreeView 通常与模型&#xff08;如 QStandardItemModel、QFileSystemModel 或自定义模型&#xff09;一起使用&#xff0c;以管…

前端最新面试题(Javascript模块篇)

目录 1 数据类型基础 1.1 JS内置类型 1.2 null和undefined区别 1.3 null是对象吗?为什么? 1.4 1.toString()为什么可以调用? 1.5 0.1+0.2为什么不等于0.3?如何让其相等 1.6 如何理解BigInt 1.7 JS 整数是怎么表示的 1.8 Number() 的存储空间是多大?如果后台发送了…

WAF几种代理模式详解

WAF简介 WAF的具体作用就是检测web应用中特定的应用&#xff0c;针对web应用的漏洞进行安全防护&#xff0c;阻止如SQL注入&#xff0c;XSS&#xff0c;跨脚本网站攻击等 正向代理 WAF和客户端与网络资源服务器都建立连接&#xff0c;但是WAF 的工作口具有自己的 IP 地址&…

oracle数据回显时候递归实战

太简单的两篇递归循环 orcale 在项目里递归循环实战 先看资产表T_ATOM_ASSET结构 看业务类别表T_ATOM_BUSI_CATEGORY结构 问题出现 页面显示 实际对应的归属业务分类 涉及到oracle递归实战(这里不会如何直接在atomAsset的seelct里面处理递归回显) 直接在实现层看atomAs…

推荐系统三十六式学习笔记:开篇词|用知识去对抗技术不平等

目录 开篇词知识点汇总 开篇词 生活中每桩糟糕事&#xff0c;几乎都是时机不当的结果&#xff0c;每一件美好事&#xff0c;都是恰逢其时的结果。在恰到好处的时候&#xff0c;用户邂逅到美好的事物&#xff0c;想必正是一件美好的事情。是的&#xff0c;推荐系统就是促成美好…

【JavaScript脚本宇宙】不可或缺的Web开发工具:图表和可视化

图形化你的数据&#xff1a;六款顶级JavaScript库全接触 前言 在本文中&#xff0c;我们将深入探讨六个强大的JavaScript库&#xff0c;这些库被广泛应用于数据可视化和交互式图形展示。我们将了解每个库的概述、主要特性、使用示例以及使用场景&#xff0c;以帮助读者更全面…

zynq/zynqMP启动模式总结:FLASH+emmc启动/petalinux烧写速度最快的启动方式

因客户要求zynq开发板只有FLASH和emmc&#xff0c;然而还得在petalinux进行开发系统&#xff0c;因FLASH大小有限&#xff0c;所以没办法把内核和根文件地址全部存储到FLASH中&#xff0c;于是想配合emmc进行启动&#xff0c;但是在网上搜索的大多都是只把根文件系统放到了emmc…

Leetcode - 131双周赛

一&#xff0c;3158. 求出出现两次数字的 XOR 值 本题是一道纯模拟题&#xff0c;直接暴力。 代码如下&#xff1a; class Solution {public int duplicateNumbersXOR(int[] nums) {int ans 0;long t 0;for(int x : nums){if(((t>>x)&1) 1){ans ^ x;}else{t | (…

三种路由协议RIP,OSPF和BGP

RIP&#xff08;Routing Information Protocol&#xff09; 概述 类型&#xff1a;距离矢量路由协议&#xff08;Distance Vector Routing Protocol&#xff09;用途&#xff1a;主要用于小型到中型的局域网&#xff08;LAN&#xff09;。工作原理&#xff1a;通过周期性地广…

知识笔记——jieba分词初探

1. 简介 jieba 是python中一个非常好用的 中文分词组件&#xff0c;但它并不是只有分词这一个功能&#xff0c;还提供了很多在分词之上的算法&#xff0c;如关键词提取、词性标注等。 安装方式&#xff1a; pip install jieba2. 分词 支持 3 种分词模式&#xff1a;精确模式…

U-Net网络

U-Net网络 一、基本架构 各个箭头的解释&#xff1a; conv 3 * 3, ReLU&#xff1a;表示通过一个3 * 3的卷积层&#xff0c;并且该层自动附带一个非线性激活层&#xff08;ReLu&#xff09;copy and crop&#xff1a;表示进行裁剪然后再进行拼接&#xff08;在channel的维度上…

Nmap使用方法

Nmap 介绍 Nmap是一个免费开放的网络扫描和嗅探工具包&#xff0c;也叫网络映射器&#xff08;Network Mapper&#xff09;。该工具其基本功能有三个&#xff0c;一是探测一组主机是否在线&#xff1b;其次是扫描主机端口&#xff0c;嗅探所提供的网络服务&#xff1b;三是可…

代码覆盖率工具JaCoCo用法总结及示例

JaCoCo 是一个用于计算 Java 代码覆盖率的工具&#xff0c;它可以测量单元测试覆盖了代码的哪些部分。JaCoCo官网&#xff1a;EclEmma - JaCoCo Java Code Coverage Library 目录 1. JaCoCo 基本用法 2.JaCoCo 集成到构建流程 3.设置 JaCoCo 覆盖率目标 4.集成到现有测试框…

【CALayer-时钟练习-CADisplayLink Objective-C语言】

一、我们接着来看,这个CADisplayLink啊, 1.刚才我们说那个时间呢,差上1秒钟的样子,然后呢,我们现在呢,用这个叫做CADisplayLink的东西,来解决,用这个类,来解决啊, 我们说,NSTimer,是跑到这儿了以后,一秒钟以后, 它才会执行,这个timeChange方法,真正的时间,不…

docker mqqt 安装

安装 cd /data/mqqt/ 目录准备 mkdir /data/mqqt/mosquitto/config/ #vim Dockerfile # 使用官方Eclipse Mosquitto镜像作为基础镜像 FROM eclipse-mosquitto:latest # 复制配置文件到容器内 COPY mosquitto.conf /data/mqqt/mosquitto/config/mosquitto.conf# 暴露默认的M…

AWS 高防和阿里云高防深度对比

随着网络攻击的不断增加&#xff0c;企业对于网络安全的需求也越来越高。在这种情况下&#xff0c;高防护服务成为了企业网络安全的重要组成部分。AWS和阿里云作为全球领先的云计算服务提供商&#xff0c;都提供了高防护服务&#xff0c;但它们之间存在着一些差异。我们九河云一…

基于PTP实现主机与相机系统时钟同步功能

基于PTP实现主机与相机系统时钟同步功能 一、PTP简介二、工业相机PTP功能支持三、工业相机时间戳介绍3.1基本概念3.2海康工业相机时间戳介绍3.2.1相机参数时间戳3.2.2图像嵌入式时间戳3.2.3相机event事件时间戳3.2.4各种时间戳的时序关系3.2.5通过工业相机SDK获取相机时间戳 四…

JS实现彩色图片转换为黑白图片

1. 使用 Canvas 研究 canvas 时发现一个有趣的现象——将彩色图片巧妙地转换为黑白图片。以下是实现这一功能的简洁代码示例&#xff1a; <div style"display: flex"><img src"./panda.jpeg" /><button onclick"change()">转…