💥 1.3.0-beta.1 Breaking Change

[iamkun]

1.3.0-beta.1 带来的破坏性变动 | Breaking change introduced in 1.3.0-beta.1

• 调整组件 size 属性为 large/default/small | Adjust component size to large/default/small, Thanks to @YunYouJun @huangzhongzhong refactor(style): adjust component size to large/default/small #4491
• 移除全局配置 app.config.globalProperties.$ELEMENT | Remove global config app.config.globalProperties.$ELEMENT, Thanks to @sxzz refactor(utils)!: refactor global config #4793

具体调整 | Detail

• 组件 size 体系由 default/medium/small/mini 切换为更自然的 large/default/small，以 default 为基础，需要加大则选择 large，需要缩小则选择 small | The component size system is switched from default/medium/small/mini to large/default/small. default will be the default size, use large if you need to increase it, or use small to reduce the size.

• Padding 方面则优化为更通用的 4px体系，采用 4/8 px作为原子单位控制整个系统的 padding 一致性。即大组件 padding 也大，小组件 padding 也小 | In terms of Padding, it is optimized to a more general 4px system, using 4/8 px as the atomic unit to control the padding consistency of the entire system. That is, the padding of large components is also large, and the padding of small components is also small.

• 主要涉及的组件为 Button、Radio、Checkbox 、Input、Select、DateTimePicker、From等表单组件和Table、Tag 等其他有 size 属性的组件。主要涉及属性为 padding、 margin 等 padding 属性修改、 font-size 等字体和图标大小修改等。| The main components involved are Button, Radio, Checkbox, Input, Select, DateTimePicker, From, Table, Tag, and other components with size properties. It mainly involves the modification of padding properties such as padding and margin and the modification of font and icon size such as font size.

• app.config.globalProperties.$ELEMENT 已移除，请使用 app.use(ElementPlus, { /* opts */ }) 或 config-provider | app.config.globalProperties.$ELEMENT has been removed，please use app.use(ElementPlus, { /* opts */ }) or config-provider

为什么带来这些变动 | Breaking change explained.

原因 ｜ Reason

• 1 来自大量用户的反馈，希望能提供更小的尺寸，以提高页面的信息密度。例如吐槽默认的 40px 的 button 和 input 组件太大，一屏空间内放不了多少东西｜ Feedback from a large number of users, hoping to provide a smaller size to improve the information density of the page. For example, the default 40px button and input components are too big to fit many things on one screen.
• 2 Element UI 原本的 size 系统存在一些不合理的地方，例如四个 size 中的 medium 较少应用，有点累赘。 padding的设定也有不够合理之处 ｜ Element UI's original size system has some unreasonable points. For example, the medium of the four sizes is less used, which is a bit cumbersome. The padding setting is also not reasonable enough.

目标 ｜ Target

• 结合灵活，扩展的设计原则，修改的方向主要有两个，一是提供更小尺寸的组件，满足高信息密度需求。例如 提供24px 的 button、input，32px 的表格等｜One is to provide smaller-sized components to meet high information density requirements. For example, provide 24px button, input, 32px form, etc.
• 让参数变化和分布更为合理，有据可依，有规则可扩展｜ Make parameter changes and distributions more reasonable, based on evidence, and scalable with rules.
• 尽可能的继承 Element UI 的相关参数，避免无意义的修改 ｜ Inherit the relevant parameters of Element UI as much as possible to avoid meaningless modifications.

ref: https://www.yuque.com/docs/share/1e50bcb3-225c-42e5-a517-716867a681f5#psGB7

[sxzz]

关于 app.config.globalProperties.$ELEMENT，也是从 Element UI 遗留下来的代码。使用 Vue 3 建议使用 inject 的方式去传递全局配置。新方式支持配置 reactive 可变。

About app.config.globalProperties.$ELEMENT, it is also the code left over from Element UI. With Vue 3, it is recommended to use inject to pass the global configuration. The new way supports reactive configuration.

[oliverzy]

强烈支持这次的改动，原来默认的尺寸确实太大了点，现在这样的改动显然是用起来更方便了

[a452746100]

要改好多哦

[sscfaith]

现在的small太小了，不如原来的mini看着舒服

[lnyie]

希望保留原来的mini

[Cheerwhy]

国际化配置通过app.use 无效了

[warmthsea]

App.vue 使用 ElConfigProvider 包router-view实现国际化

[sxzz]

已修复，等待下一个版本或使用 nightly 版本。

[emojiiii]

If using app.use(ElementPlus, { size: 'small', zIndex: 3000 }) to set i18 or global size is invalid, you can refer to the solution

如果通过 app.use(ElementPlus, { size: 'small', zIndex: 3000 }) 这样设置国际化或者全局size无效的，可以参考 解决方案

[Xwudao]

我就知道，但凡1个月不更新，肯定就是break change

[warmthsea]

现在项目一路跟着升级 到1.2.0-beta.6 版，这次 Breaking Change 没跟着升级， 等他多更新两个版本再升级到 beta3+

[Xwudao]

对，可以累积一些，但也别落后太多，不然很头疼

[CaiWenlie]

现在项目一路跟着升级 到1.2.0-beta.6 版，这次 Breaking Change 没跟着升级， 等他多更新两个版本再升级到 beta3+

心真大呀，每次升级都是心惊胆战

[warmthsea]

现在项目一路跟着升级到1.2.0-beta.6版，这一次突破性的变化跟着没升级，等他多更新两个版本再升级到beta3+

心真大呀，每次升级都是心惊胆战

因为他前面有bug，是无法解决的，新版本修复了，所以才一路升级的

[a452746100]

现在项目一路跟着升级 到1.2.0-beta.6 版，这次 Breaking Change 没跟着升级， 等他多更新两个版本再升级到 beta3+

我们也停在了1.2.0-beta.6，不敢升了，升了UI全要检查改动，不过现在正式版2.0已经发布了，不知道咋办了

[ls-v]

吓得我赶紧换上了arco.design

[saburo-super]

更新完后，大变样，感觉字体大小之类的还有待优化

[wsqrin]

低版本内核浏览器，文档进不去了，能不能解决一下

[warmthsea]

估计他们在部署

[emojiiii]

可能是网络波动了，再刷新重试一下

[wsqrin]

不是网络波动，换了浏览器就能打开

[emojiiii]

请留意官网对于版本的兼容性要求，过低版本的确实没办法。 如果是 globalThis 的问题，请查看 #5313

[toobeloong]

每一次 breaking， 都是心的breaking

[Cheerwhy]

用了10天 用回1.2.0了 1.3.0bug也太多了

[meteornk]

我从1.2.0-beta.6 更新到 1.3.0-beta.1，提示如下错误：
error in ./node_modules/element-plus/es/components/date-picker/src/date-picker-com/basic-date-table.mjs

Module parse failed: Unexpected token (106:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate;
| cell.inRange = props.minDate && calTime.isSameOrAfter(props.minDate, "day") && calEndDate && calTime.isSameOrBefore(calEndDate, "day") || props.minDate && calTime.isSameOrBefore(props.minDate, "day") && calEndDate && calTime.isSameOrAfter(calEndDate, "day");

      if (props.minDate?.isSameOrAfter(calEndDate)) {

| cell.start = calEndDate && calTime.isSame(calEndDate, "day");
| cell.end = props.minDate && calTime.isSame(props.minDate, "day");

@ ./node_modules/element-plus/es/components/date-picker/src/date-picker-com/panel-date-range.mjs 11:0-47 22:4-13
@ ./node_modules/element-plus/es/components/date-picker/src/date-picker.mjs

请问各位大佬怎么解决？

[sxzz]

使用的是Webpack 4吗？需要添加babel把optional chaining 转译

[meteornk]

我是使用vue-cli创建的vue项目，使用的默认配置，没有通过vue.config.js更改webpack的配合。我不动webpack的配置。大佬能给点详细说明吗？

[sxzz]

我是使用vue-cli创建的vue项目，使用的默认配置，没有通过vue.config.js更改webpack的配合。我不动webpack的配置。大佬能给点详细说明吗？

再次更新到最新版本

[Leega0]

每次升级都心惊胆战，这次1.3的确实不敢升了，本身对各种按钮等组件做了定制化，还是老老实实等正式版吧。