【技术需求】元素升级 2.x #136

背景

link-center项目的技术栈比较老旧，未来可以预测到许多业务需要在最新的 的基础上进行开发，靠原生 手写实现封装花费时间较多且稳定性不是很好，比如实现一个日期组件ElementVue

1. 如今大多数开源的 应用，如 、 等都依赖于 以上的版本， 以下版本显然是没有办法兼容这些组件的Vuevue-easytable vue-treeselectVue 2.xVue 2.x
2. 目前使用的版本也缺乏一些新的特性，升级之后，也是为了更好的适应
3. 
   

目标

1. 从 平稳过渡到 以上1.4.13Element 2.x
2. 兼容现有样式和组件
3. 
   

升级

移除 中的 版本package.jsonelement-ui

// package.json
element-ui: '2.15.7'

安装最新版本

$ npm install element-ui @2.15.7 -S

改动点

引入位置替换

• 样式名称替换
  在 中修改新增的 主题，将 替换为src/index.jstheme-chalkimport 'element-ui/lib/theme-default/index.css import 'element-ui/lib/theme-chalk/index.css
  
• .babelrc
  把 替换为theme-defaulttheme-chalk

引入优先级问题

有的组件样式需要进行定制覆盖，于是就在组件里面用 进行了同类名的样式替换，这样在开发环境下效果是符合预期的，但是打包编译后，优先级就变了。需要在 修改引入文件路径顺序的问题css scopedsrc/index.js

修改前：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

修改后：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)

页面全局报错修正

• 编译报错，Vue packages version mismatch
  这个错误是因为在 版本升级过后，对应的 版本 及 的版本未升级的原因element uiVuevue-template-compiler

$ npm install vue-template-compile @2.6.14 -S

• 界面渲染失败，控制台报错： 属性不存在_v
  这里需要注意 最低兼容 ，因此升级 Vue 到 2.5 以上Element 2.xVue 2.5.x

$ npm uninstall vue
$ npm install vue@2.6.12

• 编译报错,TypeError: VueLoaderPlugin is not a constructor
  

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin()
    ]
}

vue-loader也需要升级，以便支持Element 2.x

组件属性变更

• 项目中的图标图标：
  升级后很多 名称发生了变化导致无法显示，需要去文档查看最新的图标名称icon
  
• 按钮：
  为了方便使用第三方图标， 的 属性现在需要传入完整的图标类名Buttonicon
  
• 复选框：
  Checkbox的 事件中，参数由 变为了changeeventvalue
  
• 输入：

1. 移除了 的 属性。现在通过 或者 具名插槽来加入尾部图标inputiconsuffix-iconsuffix
   
2. 移除 和 事件，现在如果需要为输入框中的图标添加点击事件，请以具名 的方式添加图标on-icon-clickclickslot
   
3. change事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 元素一致。如果需要实时响应用户的输入，可以使用 事件inputinput
   
4. 盒模型从 修改为blockinline-block
   
5. Input的 属性被传递到了最底层的 元素，需要关注有 的idinputidel-input
   

• 选择：

6. 盒模型从 修改为blockinline-block
   
7. Select，值为对象类型时，需要提供一个 作为唯一性标识value-key
   
8. Select，过滤情况下， 为选中选项的placeholderlabel
   

• 开关：

9. 由于 属性在 JSX 中会被识别为事件，导致 所有 属性在 JSX 中无法正常工作，所以 属性更名为 ，对应地， 属性更名为 。受到影响的属性有：on-*Switchon-*on-*active-off-inactive-*on-icon-class、off-icon-class、on-text、off-text、on-color、off-color、on-value、off-value
   
10. active-text和 属性不再有默认值inactive-text
    

• 时间选择器：
  点击清空按钮时， 中的参数由 变为change’’null
  
• 日期选取器：
  同timepicker
  
• 日期时间选取器：
  同timepicker
  
• 上传：
  Upload重构升级， 属性更名为 , 属性更名为 ， 属性被移除default-file-listfile-listshow-upload-listshow-file-listthumbnail-mode
  
• 表单组件：

11. Form validateField()方法回调的参数更新
    
12. Form移除输入框的成功状态
    

• Table组件：

13. 移除通过 自定义列模板的功能inline-template
    
14. sort-method现在和 保持一致的逻辑，要求返回一个数字Array.sort
    
15. 将 移至 元素以外，以保证其只被渲染一次append slottbody
    
16. expand事件更名为 ，以保证 的命名一致性expand-changeAPI
    
17. row-class-name和 的函数参数改为对象，以保证 的一致性row-styleAPI
    

• 标记：
  type属性现在支持 四个值success、info、warning 和 danger
  
• 分页：
  表单组件的 事件和 的 事件现在仅响应用户交互changePaginationcurrent-change
  
• 装载：
  非全屏 遮罩层的 修改为 2000；
  全屏 遮罩层的 值会随页面上的弹出组件动态更新Loadingz-indexLoadingz-index
  
• 制表符：

18. 盒模型从 修改为 ， 移除 属性inline-blockblockTab-Panelabel-content
    
19. Tabs现在内部不再维护 实例，需要在外部通过相关事件去处理tab
    

• 下拉菜单：

20. menu-align属性变更为 ，增加更多方位属性placement
    
21. show-timeout和 属性现在仅在 为 时生效hide-timeouttriggerhover
    

• 对话：

22. Dialog的遮罩层现在默认插入至 元素上body
    
23. 移除 属性，现在 的尺寸由 和 控制sizeDialogwidthfullscreen
    
24. 移除通过 控制 显示和隐藏的功能v-modelDialog
    

• 工具提示：

1. 重构 ，不再生成额外的 标签，确保被 包裹的组件的结构不变TooltipHTMLtooltip
   
2. el-tooltip标签中，子元素如果有 ，则需要为 也加上v-if el-tooltipv-if

非兼容性更新带来的警告

虽然项目能跑起来了，但是控制台还会有很多警告，一部分是来自 本身的警告，还有一些是 的非兼容属性或者即将废弃的属性所带来的警告，需要我们对这些警告进行修改。常见的有：VueElement

• v-for循环渲染组件时，必须为组件绑定 值key
• v-for绑定的 值中，存在同样的 值keykey
• Element中的废弃属性带来的警告，比如： 中的 改为inputiconsuffix-icon

测试事项

• 建议把测试时间尽量拉长一点，这样子才能发现项目中潜在的问题
• 全量测试