javascript - 如何在Vue 2中全局修改Element UI组件默认类名?

Question

求问对于vue2项目的elementui插件库，如何全局修改某个组件标签的默认类名，例如将el-select的默认类名由el-select修改为"el-select custom-select"

我在代码中尝试访问目标组件对象，但只在render函数中发现返回的虚拟dom对象中的staticClass类与默认类名有关，难道是要重写render函数？该如何重写

Answer 1

在Vue 2中使用Element UI时，直接修改组件的默认类名并不是直接支持的，因为Element UI的组件类名通常是硬编码在组件内部的。不过，你可以通过几种方法间接实现这一需求，而不需要重写组件的render函数。

方法一：使用全局CSS覆盖

最直接且简单的方法是使用全局CSS来覆盖Element UI组件的默认样式。虽然这不会改变HTML元素上的类名，但它可以让你通过自定义类名来应用样式，从而达到类似的效果。

/* 假设你想修改el-select的样式 */
.el-select.custom-select .el-input {
    /* 在这里写你的样式 */
}

/* 或者直接覆盖el-select的样式 */
.el-select.custom-select {
    /* 自定义样式 */
}

然后，在你的Vue组件中，你可以手动给el-select添加这个自定义类名：

<el-select class="custom-select" v-model="selected">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

方法二：封装自定义组件

如果你需要更彻底地控制Element UI组件的行为和样式，包括类名，你可以考虑封装一个自定义组件。在这个自定义组件中，你可以使用Element UI的组件，并通过$slots和$scopedSlots（如果适用）来传递内容，同时添加你想要的类名。

<!-- CustomSelect.vue -->
<template>
  <el-select class="el-select custom-select" v-bind="$attrs" v-on="$listeners">
    <slot></slot>
  </el-select>
</template>

<script>
export default {
  name: 'CustomSelect'
}
</script>

<!-- 使用 -->
<custom-select v-model="selected">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</custom-select>

方法三：使用JavaScript动态添加类名

虽然不推荐（因为它涉及到直接操作DOM），但在某些情况下，你可能需要在组件挂载后通过JavaScript动态添加类名。这可以通过mounted钩子实现，但请注意，这可能会与Vue的响应式系统脱节，并且可能不是最佳实践。

mounted() {
  this.$el.querySelector('.el-select').classList.add('custom-select');
}

结论

通常，推荐使用第一种或第二种方法，因为它们更符合Vue和Element UI的设计哲学，并且更易于维护和扩展。如果你只是想要改变样式，那么使用全局CSS覆盖就足够了。如果你需要更复杂的自定义，那么封装一个自定义组件可能是更好的选择。