修改ElementUI源碼實踐

時間  2019-11-17
標籤 修改 elementui 源碼 實踐 简体版
原文   原文鏈接

提要

github地址：https://github.com/boychina/element-devcss

Vue2.0+Vuex+ElementUI是如今不少項目都在使用的BS軟件的開發組合。vue

Vue相較於Angular具備學習成本低，上手快以及組件輕量化的特色；相較於React，其官方提供的不少指令以及能夠自定義的指令可以爲讓開發更加高效。而且相較於React生命週期監聽全部props和state的變化，Vue中提供的watch方法監聽單個數據的變化，可以更加直觀的進行數據操做。node

須要修改源碼的項目需求

須要修改源碼的項目需求總共有兩處：git

  1. ElementUI提供的樹型組件的CheckBox須要進行置灰；
  2. ElementUI的的穿梭框中須要進行6000條以上的數據操做；

準備工做

利用 npm install element-ui --save 下載的內容中包括了ElementUI每一個組件的源碼 node_modules\element-ui\packages， 以及官方當前版本打包之後的代碼 node_modules\element-ui\lib， 咱們通常全量引入或者是部分引入組件都引用是打包之後的 lib 裏邊的代碼。github

//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文件裏邊引入模塊的方式進行引入。vuex

import Button from 'element-ui/packages/button'

不過，這種方式也存在相應的問題： 因爲ElementUI中使用了一些高級語法，其中包括jsx等的方式，因此須要下載相應的模塊，好比‘transform-vue-jsx’。 而且在.babelrc文件中添加：chrome

"plugins": ["transform-runtime","transform-vue-jsx"],

這樣，就能夠跑出來了，一切看起來彷佛都好了。npm

可是，不幸的是只是添加這些babel方法並不能解決原版可以向低版本瀏覽器支持的能力，好比IE11就悲劇了。element-ui

因此，只能採起其餘方式，即在GitHub上找到ElementUI——Dev源碼，而後修改打包後直接替換lib文件裏邊的全部內容。segmentfault

具體如何進行ElementUI的開發，官方有相應的介紹：https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md

問題分析與解決方法

  1. 針對第一個問題，因爲原生的樹型組件（Tree）並無提供對於Checkbox進行置灰的操做，可是經過觀察Tree這個組件的源碼，
//tree-node.vue文件

<template>
// ...
<el-checkbox
    v-if="showCheckbox"
    v-model="node.checked"
    :indeterminate="node.indeterminate"
    @change="handleCheckChange"
    @click.native.stop="handleUserClick">
</el-checkbox>
//...
</template>

<script type="text/jsx">
    //...
    import ElCheckbox from 'element-ui/packages/checkbox';
    //...
</script>

咱們很明顯可以看出，其中使用的CheckBox是經過引入ElCheckbox這個組件來生成的，因此ElCheckBox這個組件時有disabled這個屬性的，因此給飲用的CheckBox這個組件添加disabled爲true便可。

//tree-node.vue文件

<el-checkbox
    v-if="showCheckbox"
    v-model="node.checked"
    :indeterminate="node.indeterminate"
    :disabled="checkboxDisabled"
    @change="handleCheckChange"
    @click.native.stop="handleUserClick">
</el-checkbox>

而且能夠經過props一層一層把設置的變量傳遞到tree-node.vue文件。而且tree組件的特色，tree-node裏邊還有下一層的tree-node，因此也要把checkboxDisabled這個屬性進行遞歸傳遞。

//tree-node.vue
<template>
    //...
    <el-checkbox
        v-if="showCheckbox"
        v-model="node.checked"
        :indeterminate="node.indeterminate"
        :disabled="checkboxDisabled"
        @change="handleCheckChange"
        @click.native.stop="handleUserClick">
      </el-checkbox>
      <span
        v-if="node.loading"
        class="el-tree-node__loading-icon el-icon-loading">
      </span>
      <node-content :node="node"></node-content>
    </div>
    <el-collapse-transition>
      <div
        class="el-tree-node__children"
        v-show="expanded">
        <el-tree-node
          :checkboxDisabled="checkboxDisabled"
          :render-content="renderContent"
          v-for="child in node.childNodes"
          :key="getNodeKey(child)"
          :node="child"
          @node-expand="handleChildNodeExpand">
        </el-tree-node>
      </div>
    </el-collapse-transition>
    //...
</template>

<script type="text/jsx">
  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
  import ElCheckbox from 'element-ui/packages/checkbox';
  import emitter from 'element-ui/src/mixins/emitter';

  export default {
    name: 'ElTreeNode',

    componentName: 'ElTreeNode',

    mixins: [emitter],

    props: {
      node: {
        default() {
          return {};
        }
      },
      checkboxDisabled: Boolean,
      props: {},
      renderContent: Function
    }
//...  
</script>

同時，tree.vue這個文件也要進行參數傳遞：

//tree.vue文件
<template>
  <div class="el-tree" :class="{ 'el-tree--highlight-current': highlightCurrent }">
    <el-tree-node
      v-for="child in root.childNodes"
      :checkboxDisabled="checkboxDisabled"
      :node="child"
      :props="props"
      :key="getNodeKey(child)"
      :render-content="renderContent"
      @node-expand="handleNodeExpand">
    </el-tree-node>
    <div class="el-tree__empty-block" v-if="!root.childNodes || root.childNodes.length === 0">
      <span class="el-tree__empty-text">{{ emptyText }}</span>
    </div>
  </div>
</template>

<script>
//...
    props: {
      data: {
        type: Array
      },
      checkboxDisabled: Boolean,
      //...
    },
//...
</script>

固然，在使用tree這個組件的地方也相應的把屬性傳下去。

//項目文件.vue
<el-tree
    :data="allMenuPermissions"
    :checkboxDisabled=true
    default-expand-all
    show-checkbox
    node-key="funsflowId"
    ref="tree"
    highlight-current
    :props="defaultProps">
</el-tree>

到如今爲止，第一個問題解決了，經過打包驗證可以實現對tree組件中的CheckBox進行置灰的操做了。

  1. 對於第二個問題，是因爲數據量過大，若是將所有數據渲染到頁面上，會致使節點數量過多，頁面卡頓。

因此解決的辦法就是要減小頁面節點渲染，而且可以在進行搜索的時候可以對全量數據進行搜索。

找到動態生成每一項的穿梭框文件transfer-panel組件，

//transfer-panel.vue文件
<template>
    //...
    <el-checkbox-group
        v-model="checked"
        v-show="!hasNoMatch && data.length > 0"
        :class="{ 'is-filterable': filterable }"
        class="el-transfer-panel__list"
        :isShow="isShowItem(item,filteredData)">
        <el-checkbox
          class="el-transfer-panel__item"
          v-for="item in filteredData"
          :label="item[keyProp]"
          :disabled="item[disabledProp]"
          :key="item[keyProp]">
          <option-content :option="item"></option-content>
    </el-checkbox>
    //...
</template>

首先，裏邊的<el-checkbox></el-checkbox>中的內容是要根據顯示的數據個數進行動態循環生成。

要達到減小節點的目的，剛開始的思路是利用vue提供的v-if指令，當須要顯示的數據長度超過100條是，

就將讓v-if=false，達到不渲染當前節點的目的。

修改代碼：

//transfer-panel.vue文件
<template>
    //...
    <el-checkbox-group
        v-model="checked"
        v-show="!hasNoMatch && data.length > 0"
        :class="{ 'is-filterable': filterable }"
        class="el-transfer-panel__list"
        :isShow="isShowItem(item,filteredData)">
        <el-checkbox
          class="el-transfer-panel__item"
          v-for="item in filteredData"
          v-if="showItem(item)"
          :label="item[keyProp]"
          :disabled="item[disabledProp]"
          :key="item[keyProp]">
          <option-content :option="item"></option-content>
    </el-checkbox>
    //...
</template>

<script>
    //...
    methods: {
        //...
        showItem(i){
            if(filteredData.indexOf(i) > 100){
                return false;
            } else {
                return true;
            }
        }
        //...
    }
    //...
</script>

這樣就能夠根據數據渲染的數據在總體數據中的位置來判斷，是否要渲染這條數據對應的節點。

這樣的處理方式在高版本的處理器（chrome58以上）上是沒有問題的，可是在低一點的版本的瀏覽器或者性能低一點的FireFox或者IE上仍是會出現卡頓的現象。

經過查看節點，相對應的節點也是已經沒有顯示渲染了。可是沒有渲染的部分莫名其妙的出現了不少的<!---->這樣的註釋內容。經過把HTML文件拷貝出來查看，發現文件總共大小有12M以上，因爲動手吧<!---->以及換行和空格刪除後，發現整個文件大小縮小爲2M左右。

因此，基本能夠確定卡頓是因爲渲染出來的HTML文件內容過多引發的。

大概估計這個因爲Vue中的<template>標籤引發的，雖然具體的內容節點沒有渲染，

可是CheckBox這個組件的循環渲染也會出現不少的空的<template></template>，這個空標籤就會渲染成<!--->；

經過在segmentfault上向詢問，你們給出的建議是經過修改渲染的數據，只循環渲染前100條數據以達到目的。最後的實現方式也是這樣作的。

採用這種方式就是要當心搜索的數據和最終渲染的數據要進行關聯和解關聯。

//transfer-panel.vue文件
<script>
//...
    computed: {
      filteredData() {
        let arrData = this.data.filter(item => {
          if (typeof this.filterMethod === 'function') {
            return this.filterMethod(this.query, item);
          } else {
            const label = item[this.labelProp] || item[this.keyProp].toString();
            return label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
          }
        });
        if (arrData.length > 100) {
          this.showFilteredData = arrData.slice(0, 100);
        } else {
          this.showFilteredData = arrData;
        }
        return arrData;
      },
    }

//...
</script>

在渲染的數據生成的時候，就對this.showFilteredData這個要渲染的數據進行賦值。

若是總數據超過100條，那就截取前100條賦值爲this.showFilteredData。

這樣就可以保證最多有100條數據進行循環渲染。

最終解決

這樣修改完代碼，而後執行npm run dist，就能夠再次生成lib文件中的代碼。替換到相對應的文件element-ui中的lib中，就能夠達到解決問題的目的。

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程