如何扩展 Element Plus 的尺寸配置？

Question

老项目el-ui升级到el-plus。很多地方用到了size mini 现在el-plus没有mini这个尺寸配置了。有没有方法能扩展el-plus的尺寸配置呢？

试过mini换成small样式，然后再修改small.但是老项目也针对small和mini做了区分样式改动。要确保之前的页面效果就要逐一改动页面了。大家还有什么好方法吗？

Answer 1

最近也在做类似的东西，不过我们是 antd，先是出了一套配置，然后基于 ast 对所以文件做替换。

当然，我们也对 antd 做了一些修改。

对于你这个问题我们就有两种选择

1. 修改 antd 增加更多的 size 但是会和 antd 渐行渐远，有可能我们新的设计规范用不到那么多 size
2. 将代码中的 size 做替换，比如说 mini 就使用默认的。small 改成 mini 之类的规则，因为是基于 ast 的替换，所以也不用担心有误伤。

Answer 2

1. 在 node_modules\element-plus\theme-chalk\src 或官方仓库找到主题源码
2. 将该文件夹整个拷贝到自己的项目中重命名为 element-plus-theme

3. 在 scss 文件中全局搜索关键词 small/default/large, 可以搜到很多的尺寸代码. 我们以 element-plus-theme\checkbox.scss 中搜到的代码举例:

   $checkbox-bordered-input-height: () !default;
   $checkbox-bordered-input-height: map.merge(
       (
           'large': 14px,
           'default': 12px,
           'small': 12px,
       ),
       $checkbox-bordered-input-height
   );

4. 在其中新增我们自定义的尺寸大小如下:

   @forward 'element-plus/theme-chalk/src/checkbox.scss' with (
       $checkbox-bordered-input-height: (
           'large': 14px,
           'default': 12px,
           'small': 12px,
           'mini': 12px, // new line
       )
   );

5. 在该文件内搜索 $size 变量, 可以看到如下代码:

   @each $size in (large, small) {
     // snip
   }

6. 我们修改该类代码:

   @each $size in (
       large, 
       small, 
       mini // new line
   ) {
     // snip
   }

7. 在项目入口导入主题样式入口 index.scss 时, 导入我们本地的 element-plus-theme\index.scss 即可应用修改后包含 mini 尺寸的主题样式
8. 部分提供了 props.size 的组件, 可以参考 组件封装 来覆盖 props.size 从而支持 size 传入 mini