Element UI 中为 el-input 限制全局输入长度 el-input 有个 maxlength 属性用来限制全局长度，但是全局设置有些问题，只能采用重写覆盖组件的形式来解决

在 main.js 中设置

一开始我是这样设置的

import Element from "element-ui";
Element.Input.props.maxlength.default = 1000;
//但是Element.Input.props没有maxlength属性
Element.Input.props.maxlength = {
  type: Number | String,
  default: 1000,
};
// 开发模式设置显示默认输入限制，方便查看哪些已经做了限制
if (import.meta.env.MODE === "development") {
  Element.Input.props.showWordLimit.default = true;
}

但是这样都没效果

新写组件

创建 ElInput.vue 组件

<!--
  @Author: 诚哥博客
  @Date: 2023/02/08 17:36
  @Description: 覆盖element-ui的input组件,添加一个maxlength属性默认为1000
-->

<template>
  <el-input :maxlength="maxlength" v-bind="$attrs" v-on="$listeners" />
</template>

<script>
export default {
  name: "ElInput",
  props: {
    maxlength: {
      type: Number | String,
      default: 1000,
    },
  },
  beforeCreate() {
    this.$options.components = {
      ...this.$options.components,
      ElInput: this.$parent.$options.components.ElInput,
    };
  },
};
</script>

然后在 Vue.use(Element) 下边添加

import ElInput from "@/components/ElInput/ElInput";
Vue.component("el-input", ElInput);

效果

基本所有的输入框都生效了，而且不影响自己传的参数。

image-20230208180955281