修改ElementUI源码实践

最新推荐文章于 2023-11-14 17:47:14 发布

weixin_34114823

最新推荐文章于 2023-11-14 17:47:14 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5a2b71d6f265da432b4abe63

本文介绍如何针对ElementUI的特定组件进行源码级别的定制修改，包括树型组件的CheckBox置灰及处理大量数据的穿梭框操作。同时探讨了不同引入方式的技术细节及限制，并给出了解决方案。

原文：https://www.cnblogs.com/webbest/p/7156080.html

提要

github地址：github.com/boychina/el…

Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合。

Vue相较于Angular具有学习成本低，上手快以及组件轻量化的特点；相较于React，其官方提供的很多指令以及可以自定义的指令能够为让开发更加高效。并且相较于React生命周期监听所有props和state的变化，Vue中提供的watch方法监听单个数据的变化，能够更加直观的进行数据操作。

需要修改源码的项目需求

需要修改源码的项目需求总共有两处：

ElementUI提供的树型组件的CheckBox需要进行置灰；
ElementUI的的穿梭框中需要进行6000条以上的数据操作；

准备工作

利用 npm install element-ui --save 下载的内容中包括了ElementUI每个组件的源码 node_modules\element-ui\packages，以及官方当前版本打包以后的代码 node_modules\element-ui\lib，我们一般全量引入或者是部分引入组件都引用是打包以后的 lib 里边的代码。

//main.js 全量引入ElementUI组件

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/index'
import './libs/auto'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import './assets/common/css/reset.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  ElementUI,
  template: '<App/>',
  components: { App }
})复制代码

//main.js 中部分引入组件

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
})复制代码

所以，如果利用以上两种方式是不能引用到packages里边我们修改以后的代码的。要用直接在packages文件里边引入模块的方式进行引入。

import Button from 'element-ui/packages/button'复制代码

不过，这种方式也存在相应的问题：由于ElementUI中使用了一些高级语法，其中包括jsx等的方式，所以需要下载相应的模块，比如‘transform-vue-jsx’。并且在.babelrc文件中添加：

"plugins": ["transform-runtime","transform-vue-jsx"],复制代码

这样，就可以跑出来了，一切看起来似乎都好了。

但是，不幸的是只是添加这些babel方法并不能解决原版能够向低版本浏览器支持的能力，比如IE11就悲剧了。

所以，只能采取其他方式，即在GitHub上找到ElementUI——Dev源码，然后修改打包后直接替换lib文件里边的所有内容。