ElementUI 全局设置组件的原生属性

最新推荐文章于 2025-01-15 20:29:03 发布

陪风淋雨1

最新推荐文章于 2025-01-15 20:29:03 发布

阅读量2.6k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue2 文章标签： vue js javascript elementui

本文链接：https://blog.youkuaiyun.com/cuisini1/article/details/117413023

Vue2 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在项目中批量设置ElementUI输入框组件的默认原生属性`maxlength`，避免手动逐一添加。通过深入理解Vue组件生命周期和$attrs属性，发现使用`created`等生命周期钩子无法实现预期效果。最终，通过修改组件的`render`函数成功设置全局默认属性，确保在组件渲染过程中属性始终保持生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

太长不看

props

// 设置组件默认prop
Element.Input.props.clearable.default = true;

原生属性

通常情况下，以maxlength属性为例

import Element from 'element-ui'

const render = Element.Input.render;

Element.Input.render = function () {
    // 设置组件默认原生属性（attr）
    this.$attrs.maxlength || (this.$attrs.maxlength = 2);
    return render.apply(this, arguments)
}

场景介绍

在项目遇到一个需求，给所有输入框都要有默认的字数限制。
第一时间想到了maxlength这个原生属性，但是项目中有很多输入框，一个一个的添加非常的不优雅。所以我们的目的是像设置全局变量一样，设置组件的原生属性。
Alt

设置组件的默认属性

众所周知，组件的默认props可以这么设置.

// 设置组件默认prop
Element.Input.props.clearable.default = true;

设置组件的默认原生属性

同样的思路，我们可以通过修改组件的注册参数，实现目的。
我们可以利用组件实例的$attrs属性。

利用生命周期?

import Element from 'element-ui'

const created = Element.Input.created;
//劫持
Element.Input.created = function () {
    this.$attrs.maxlength || (this.$attrs.maxlength = 2);
    created.apply(this, arguments)
}

这么写乍一看没啥问题，然而实际效果是只有第一次渲染时属性是生效的，后面双向改变触发渲染属性就会失效。
created，mounted，updated都不可以！

为啥不行？

翻阅源码找到$attrs相关部分
取自src/core/instance/lifecycle.js 函数updateChildComponent

  // update $attrs and $listeners hash
  // these are also reactive so they may trigger child update if the child
  // used them during render
  vm.$attrs = parentVnode.data.attrs || emptyObject
  vm.$listeners = listeners || emptyObject

重点是这句

vm.$attrs = parentVnode.data.attrs

parentVnode是父级虚拟Dom。parentVnode.data.attrs就是模板编译后通过createElement的第二参数传入的。

何时调用

通过F12断点断点调用栈图片
我们根据调用栈，Vue组件在每次dom-diff中，在同级节点更新完毕，执行更新子节点前执行这段代码。去父级的render函数中去获取attrs

因此我们在created等生命周期中执行是不可以的。

结论：利用render函数

import Element from 'element-ui'

const render = Element.Input.render;

Element.Input.render = function () {
    // 设置组件默认原生属性（attr）
    this.$attrs.maxlength || (this.$attrs.maxlength = 2);
    return render.apply(this, arguments)
}