重写elementui
重写 Element UI 的方法
Element UI 是一个基于 Vue.js 的组件库，若需重写或自定义其样式和功能，可通过以下方式实现。
使用 SCSS 变量覆盖主题
Element UI 提供了一套 SCSS 变量，允许通过覆盖这些变量实现主题定制。在项目中创建一个 SCSS 文件（如 element-variables.scss），定义需要修改的变量。
$--color-primary: #409EFF;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";在项目的入口文件（如 main.js）中引入该文件：
import './element-variables.scss';
import ElementUI from 'element-ui';
Vue.use(ElementUI);通过 CSS 覆盖组件样式
若需调整单个组件的样式，可直接通过 CSS 选择器覆盖。建议使用 scoped 样式或全局样式文件。
.el-button {
border-radius: 8px;
}使用 Mixins 扩展功能
Element UI 的某些组件支持通过 Mixins 扩展功能。例如，表格组件可通过 table-column 的 formatter 属性自定义内容。
<el-table-column prop="date" label="日期" :formatter="formatDate"></el-table-column>
methods: {
formatDate(row, column, cellValue) {
return new Date(cellValue).toLocaleString();
}
}封装高阶组件
对于需要深度定制的场景，可以基于 Element UI 的组件封装高阶组件。例如，扩展 el-dialog 以支持默认配置。
<template>
<el-dialog :visible.sync="visible" :title="title" :width="width">
<slot></slot>
</el-dialog>
</template>
<script>
export default {
props: {
title: { type: String, default: '提示' },
width: { type: String, default: '50%' }
},
data() {
return { visible: false };
},
methods: {
show() { this.visible = true; },
hide() { this.visible = false; }
}
};
</script>按需引入减少体积
若仅需部分组件，可通过按需引入减少打包体积。使用 babel-plugin-component 插件。
import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);在 babel.config.js 中配置插件：
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]注意事项
- 覆盖样式时注意选择器优先级，避免因权重不足导致样式不生效。
- 使用 SCSS 变量时确保文件加载顺序正确，避免变量未定义错误。
- 按需引入需配置正确的 Babel 插件，否则可能导致样式缺失。
