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

如果你的 Element 等框架存在二次确认点击过快导致多次情况的问题，你可以尝试以下方法来修复这个问题 修复教程 您可以在使用 Element UI 的确认框时，在全局范围内添加一个插件来控制确认框的打开次数。 首先，创建一个 Vue 插件： // confirm-plugin.js let isConfirming = false; const confirmPlugin = { install(Vue) { const confirm = Vue.prototype.$confirm; Vue.prototype.$confirm = function (message, title, options) { if (isConfirming) return Promise.reject(new Error("There is an existing confirm")); isConfirming = true; return confirm(message, title, options) .then(() => { isConfirming = false; return Promise.resolve(); }) .catch(() => { isConfirming = false; return Promise.reject(new Error("Cancelled")); }); }; }, }; export default confirmPlugin; 然后在应用程序的入口 main.js 处引入并注册这个插件： import Vue from "vue"; import confirmPlugin from "./confirm-plugin"; Vue.use(confirmPlugin); 现在，您可以在应用程序的任何地方使用 this.$confirm 方法，而不必担心点击确认按钮过快会出现两个确认框。 请注意，在这种情况下，如果在确认框打开时再次调用 this.$confirm 方法，它将返回一个 Promise 对象，该对象的状态为 rejected，因此您需要使用 .catch 语句来处理错误。