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输入框根据字节限制输入长度(中文占两字节,数字英文占一字节)
1. 深拷贝
export function deepClone(data){
if (typeof data !== 'object' || typeof data == 'function' || data === null) {
return data
}
let item
if (Array.isArray(data)) {
item = []
}
if (!Array.isArray(data)) {
item = {}
}
for (let i in data) {
if (Object.prototype.hasOwnProperty.call(data, i)) {
item[i] = deepClone(data[i])
}
}
return item
},