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); 效果 基本所有的输入框都生效了，而且不影响自己传的参数。