element-plus版本升级遇到的问题及踩坑总结

element-plus版本升级背景

项目中使用的element-plus版本是V1.1.0-beta.3非正式版本，原因是项目创建时，element-plus还未发布正式版本，需要升级到正式版本，正式版本修复了一些Bug。

element-plus版本历程

1. V2.0.0 2022-02-07发布，第一个稳定的release版本，之前全是beta版本，截止2023-08-10，最新的版本是V2.3.9（2023-08-04发布的）

2. V1.3.0-beta.1（2021-12-31发布）有破坏性改动
   

3. V1.2.0-beta.1（2021-10-30发布）有破坏性改动
   

升级过程中遇到的问题

v1.1.0-beta.24升级到v1.2.0-beta.1升级遇到的问题

1、elform对外暴露的ref方式改变，导致项目中原来的代码报错，需要改变使用的方式。

图1 elForm原来的ref（普通字符串）

图2 elForm升级后的的ref（Symbol）

2、图标引用变化

旧版本使用element图标的方式是，通过给i标签传class实现，底层是通过伪类来实现图标渲染的，图标存在element-icons.woff字体文件中，每次页面刷新需要重新请求这个字体文件。

旧版本使用element图标的方式

旧版本通过伪类显示图标
旧版本element定义伪类样式的文件

新版本通过组件引用element图标，底层是svg资源文件，优点是不用每次去请求75kb的资源文件。

新版本全局注册element图标组件

新版本使用图标组件

3、element-plus组件主题不生效

v1.1.0-beta.3版本设置element-plus主题色

v1.2.0-beta.1版本设置element-plus主题色

v1.2.0-beta.1升级到v2.0.0升级遇到的问题

1、Dropdown组件样式错乱

表格的行内操作列有使用到GDropdown组件，本来应该显示成这样子

升级到v2.0.0后，样式错乱

其原因是GDropdown组件是基于el-dropdown组件二次封装实现的，v2.0.0版本el-dropdown组件有了很大的改变，v1.1.0-beta.3版本el-dropdown组件用到了el-popper组件，v2.0.0版本el-dropdown组件用的是el-tooltip组件。从v1.1.0-beta.3版本到v2.0.0版本，el-popper组件底层实现变化较大，导致了样式错乱问题。

V1.1.0-beta.3版本el-popover组件，jsx写法

v2.0.0版本el-tooltip组件，dom写法
解决方案是，基于V2.0.0版本的el-dropdown改造GDropdown组件，改成el-tooptip的实现方式
### 2、Select组件点击外部报错，无法关闭问题

useClickOutside函数报错，没有获取到el-popper的dom实例，原因是el-popover底层实现逻辑改变，V1.1.0-beta.3版本el-popover组件，是jsx写法，而V2.0.0版本的el-popover是基于el-tooltip的dom写法。

V1.1.0-beta.3版本el-popover组件，jsx写法

V2.0.0版本的el-popover实现，基于el-tooltip的dom写法
从v1.1.0-beta.3版本到v2.0.0版本，el-popper组件底层实现变化较大，获取不到el-popper的ref实例，导致下拉关不掉。解决方案是，获取下拉内容div的ref实例，传给useClickOutside，判断当前点击的元素是否包含在下拉内容的div实例里，判断要不要关闭下拉。