Element UI输入框全局限制输入长度

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);

效果

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