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

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
},