前提：最近项目打算将element从1.x升级到2.x，于是整理了一波常用的属性之间的区别，不是十分全面。其中非兼容性更新为升级中容易掉坑的地方，希望可以被当成快速查询工具。
element-ui 1.x与2.x的对比
| 对比项 | element1.x | element2.x | 非兼容性更新 |
|---|---|---|---|
| 依赖 | 最低兼容Vue2.5.2和IE10 | ||
| 自定义主题 | element-theme，通过在线主题生成工具下载，再引入 | element-theme-chalk 使用scss变量，直接修改主题色，覆盖原文件 | 移除theme-default |
| 综合 | 1、表单组件的 change 事件和 Pagination 的 current-change 事件现在仅响应用户交互 2、为了方便使用第三方图标，Button 的 icon 属性、Input 的 prefix-icon 和 suffix-icon 属性、Steps 的 icon 属性现在需要传入完整的图标类名 3、Button 和表单组件的 size 属性现在可接受 medium、small 和 mini | ||
| Autocomplete | 1、移除 custom-item 属性。现在通过 scoped slot 自定义输入建议列表项的内容 2、移除 props 属性，现在使用 value-key 属性指定输入建议对象中用于显示的键名 | ||
| layout布局 | 新增基于断点的隐藏类，import 'element-ui/lib/theme-chalk/display.css'; 通过添加相应类名，用于在某些条件下隐藏元素 | ||
| Container | X | 新增组件：使用flex布局，需确定兼容性。：外层容器、：顶栏容器、：侧边栏容器、：主要区域容器、：底栏容器。 | |
| color | 颜色值变化 | ||
| icon | 1、iconButton引用： 2、可以使用第三方图标库 | iconButton引用： | |
| button | 新增round、circle属性 | ||
| radio、checkbox | 1、新增border、size属性。size依赖于border 2、radio-group可以设置禁用 | ||
| input | 1、新增 可清空clearble 属性 2、新增prefix-icon、suffix-icon属性，定义icon位置 3、新增tabindex：输入框的tabindex | 1、移除 icon 属性。现在通过 suffix-icon 属性或者 suffix 具名 slot 来加入尾部图标 2、移除 on-icon-click 属性和 click 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标 3、change 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 input 事件 | |
| inputNumber | 1、新增controls-position：控制按钮位置 2、新增foucs、blur事件 | ||
| select | 1、增加clearble：可清空 2、新增collapse-tags：多选时可将选中值按文字的形式展示 3、新增auto-complete 4、新增reserve-keyword：多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 5、popper-append-to-body： 是否将弹出框插入至 body 元素 6、新增foucs、blur事件 | ||
| cascader | 1、新增separator：自定义分隔符 2、新增foucs、blur事件 | ||
| switch | on-color、off-color、on-text、off-text、on-value、off-value | active-color、inactive-color、active-text、inactive-text | 1、由于 on-x 属性在 JSX 中会被识别为事件，导致 Switch 所有 on-x 属性在 JSX 中无法正常工作，所以 on-x 属性更名为 active-x，对应地，off-x 属性更名为 inactive-x。受到影响的属性有：on-icon-class、off-icon-class、on-text、off-text、on-color、off-color、on-value、off-value 2、active-text 和 inactive-text 属性不再有默认值 |
| timePicker | 1、增加键盘事件，可用方向键导航，enter选中 2、新增is-range：是否时间范围选择 3、新增arrow-control：是否使用箭头 4、新增range-separator：选择范围时的分隔符 5、自定义图标：头部图标prefix-icon、清空图标clear-icon | ||
| datePicker | 1、新增format：输入框格式；value-format：绑定值格式 2、新增default-time：指定日期范围的具体时间 3、自定义图标：头部图标prefix-icon、清空图标clear-icon | change 事件参数现在为组件的绑定值，格式由 value-format 控制 | |
| DateTimePicker | 相关升级部分参照timePicker和datePicker | ||
| upload | 1、新增：before-remove：删除前的钩子 2、新增limit：最大允许上传个数 3、on-exceed：文件超出个数限制时的钩子 | ||
| rate | text-template | 1、score-template 2、新增show-score，只读时用，和show-text不能同时存在 | text-template 属性更名为 score-template |
| ColorPicker | 1、新增predefine：预定义颜色 2、新增size | ||
| transfer | footer-format | 1、format 2、新增target-order：右侧列表元素的排序策略：若为 original，则保持与数据源相同的顺序；若为 push，则新加入的元素排在最后；若为 unshift，则新加入的元素排在最前 3、新增clearQuery方法，清空搜索关键词 | footer-format 属性更名为 format |
| form | 1、新增size、disabled 2、新增inline-message：行内形式展现校验信息 3、新增status-icon：在输入框中显示校验结果反馈图标 4、新增validate-on-rule-change：在 rules 属性改变后立即触发一次验证 | ||
| table | 1、新增span-method：合并行或列 2、新增type=index，自定义索引 3、新增select-on-indeterminate：在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | 1、移除通过 inline-template 自定义列模板的功能 2、sort-method 现在和 Array.sort 保持一致的逻辑，要求返回一个数字 3、将 append slot 移至 tbody 元素以外，以保证其只被渲染一次 4、expand 事件更名为 expand-change，以保证 API 的命名一致性 5、row-class-name 和 row-style 的函数参数改为对象，以保证 API 的一致性 | |
| tag | 1、新增size 2、新增disable-transitions：禁用渐变动画 | type 属性现在支持 success、info、warning 和 danger 四个值 | |
| progress | 新增color：进度条背景色 | ||
| tree | current-node-key：当前选中节点的 key，只写属性 | 1、新增render-after-expand：是否在第一次展开某个树节点后才渲染其子节点 2、lazy：懒加载子节点，配合load使用3、draggable：可拖拽；allow-drag：判断节点能否被拖拽；allow-drop：拖拽时判定位置能否被放置 | |
| pagination | 默认有背景颜色 | 默认无背景颜色 | |
| alert | center设置居中 | ||
| loding | element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值 | ||
| message、messageBox | 1、可以用center居中 2、可以使用html片段dangerouslyUseHTMLString 但是确保内容可信，要不容易导致XSS攻击 | ||
| notification | 1、自定义位置position，参数top-right、top-left、bottom-right、bottom-left，默认为top-right 2、可以使用html片段dangerouslyUseHTMLString 但是确保内容可信，要不容易导致XSS攻击 | ||
| navMenu | 通过theme属性定制主题 | 1、 通过设置background-color、text-color、active-text-color自定义主题 2、可以设置disabled禁用 3、设置collapse-transition，开启折叠动画 4、SubMenu可以设置对应属性：popper-class自定义类名；show-timeout、hide-timeout展开、收起sub-menu延时；disabled禁用；popper-append-to-body将弹出菜单插入至body | 移除 theme 属性。现在通过 background-color、text-color 和 active-text-color 属性进行颜色的自定义 |
| tabs | 可以通过 tab-position 设置标签的位置 | ||
| breadCrumb | 可以通过separator-class设置自定义图标 | ||
| dropDown | 1、可以通过size设置medium、small、mini来设置尺寸 2、placement设置菜单弹出位置 | menu-align 属性变更为 placement，增加更多方位属性 3、show-timeout 和 hide-timeout 属性现在仅在 trigger 为 hover 时生效 | |
| steps | 1、通过simple设置简洁风格 2、通过align-center设置描述居中 | 1、移除 center 属性 2、现在步骤条将默认充满父容器 | |
| dialog | 可以通过size设置大小 | 1、可以通过append-to-body设置嵌套dialog 2、center设置内容居中 | 1、移除 size 属性。现在 Dialog 的尺寸由 width 和 fullscreen 控制 2、移除通过 v-model 控制 Dialog 显示和隐藏的功能 |
| popover | 事件：after-enter、after-leave 显示隐藏动画结束后才触发 |
已为社区贡献3条内容
所有评论(0)