`新人小白的第一篇文章，如果对您有帮助欢迎点赞留言支持一下，希望能帮到大家0.o

需求：

给项目中所有的输入框加长度限制，普通输入框最大长度31，textarea输入框最大长度127

elementUI是以依赖的形式按需导入的

import Vue from "vue";
import {
  Input,
} from "element-ui";

Vue.use(Input);

解决思路：

肯定不能一个一个改，费力不说，万一以后修改起来。。。。于是有了以下思路

将上述代码引入的el-input改个名字为 oel-input
重新封装组件，添加maxlength的过滤条件，并注册为el-input

代码

修改elementUI的引入文件，更改el-input组件的名字

import Vue from "vue";
import {
  Input,
} from "element-ui";

Input.componentName = "oelInput";
Input.name = "oelInput";
Vue.use(Input);

新建配置文件baseConfig.js，配置长度限制常量

const TITLE_MAX_LENGTH = 31;
const DESCRIPTION_MAX_LENGTH = 127;
export { TITLE_MAX_LENGTH, DESCRIPTION_MAX_LENGTH };

3.重新封装，新建ElInput.vue

<template>
  <oel-input
    v-model="innerValue"
    @input="valueChanged"
    v-on="$listeners"
    v-bind="$attrs"
    :type="type"
    :maxlength="
      maxlength
        ? maxlength
        : type === 'textarea'
        ? DESCRIPTION_MAX_LENGTH
        : TITLE_MAX_LENGTH
    "
  ></oel-input>
</template>

<script>
import { TITLE_MAX_LENGTH, DESCRIPTION_MAX_LENGTH } from "../config/baseConfig";

export default {
  name: "ElInput",
  data() {
    return {
      innerValue: "",
      TITLE_MAX_LENGTH,
      DESCRIPTION_MAX_LENGTH
    };
  },
  props: {
    value: [String, Number],
    type: {
      type: String,
      default: "text"
    },
    maxlength: {
      type: Number,
      default: 0
    }
  },
  methods: {
    valueChanged(newVal) {
      this.$emit("input", newVal);
    }
  },
  watch: {
    value: {
      handler: function(newVal) {
        this.innerValue = newVal;
      },
      immediate: true
    }
  }
};
</script>

<style scoped></style>

在ElInput.vue旁边新建index.js

import ElInput from "./ElInput";
import Vue from "vue";
const component = {
  install: function(Vue) {
    Vue.component("el-input", ElInput);
  } //'component-name'这就是后面可以使用的组件的名字，install是默认的一个方法
};
Vue.use(component);

5.在main.js里全局引入，完事

import "./plugins/index.js";

最后

如果有哪里写的不好的或者代码冗余的部分，欢迎大佬评论区指正。

Vue重写全局el-input，添加默认长度限制

需求：

解决思路：

代码

最后