通过继承扩展 element-ui 组件的功能

Posted 2022-11-25 在厕所喝茶

背景

在使用element-ui的Cascader 级联选择器组件的时候，我们期望在点击清空按钮的时候，可以跟Input 输入框组件一样，可以派发一个clear的事件。然而，我们查阅了文档，同时也查阅了源码，发现Cascader 级联选择器组件在点击清空按钮的时候，并没有派发出一个clear事件。

虽然我们可以监听Cascader 级联选择器组件的change事件，通过回调参数中的数组长度是否为 0 来判断是否点击了清空按钮。但是由于我们是使用动态组件，事件都是动态绑定上去的。使用形式如下：

<template>
  <div class="preview-list">
    <div class="body-container">
      <component
        v-for="component in components"
        :key="component.id"
        :is="component.name"
        v-bind="component.props"
        v-on="component.events"
      />
    </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      components: [
        
          name: "el-input",
          events: 
            clear() ,
          ,
        ,
        
          name: "el-cascader",
          events: 
            clear() ,
          ,
        ,
      ],
    ;
  ,
;
</script>

我们的期望是el-cascader可以跟el-input统一起来，都有一个clear事件派发出来。而且后期还有其他的一些组件，统一一个clear事件有助于后期的管理

解决方案

• 给element-ui提issue，虽然不一定会合并你的请求

• 自己fork一份去维护，成本太高了

• 自己实现一个Cascader 级联选择器组件，太难了

• 复用已有的Cascader 级联选择器组件，扩展或者修改功能

最终通过讨论，我们最终使用的方案是：复用已有的Cascader 级联选择器组件，扩展或者修改功能，毕竟这种方法成本最低，又简单

实现步骤

怎么复用已有的组件

我们首先需要考虑的是怎么复用已有的组件。vue2提供了 2 种方案，一种是通过extends继承组件，一种是通过mixins混入。个人更加推荐使用extends来继承组件。代码如下：

my-cascader.vue

<script>
import  Cascader  from "element-ui";
export default 
  extends: Cascader,
;
</script>

定位清空按钮的点击事件

源码在 packages/cascader/src/cascader.vue文件的第450行，handleClear方法。源码如下：

<script>
export default 
  methods: 
    handleClear() 
      this.presentText = "";
      this.panel.clearCheckedNodes();
    ,
  ,
;
</script>

重写 handleClear 方法

我们的期望是在handleClear方法中派发出clear事件。所以需要在my-cascader.vue文件中重写handleClear方法。重写后的完整代码如下：

my-cascader.vue

<script>
import  Cascader  from "element-ui";
export default 
  extends: Cascader,
  methods: 
    handleClear() 
      this.presentText = "";
      this.panel.clearCheckedNodes();
      this.$emit("clear");
    ,
  ,
;
</script>

使用

到此，我们已经完成了对Cascader 级联选择器组件的功能扩展。my-cascader.vue文件就是扩展后的组件，使用方式跟element-ui的完全一样，只不过是多了一个clear的事件回调

<template>
  <my-cascader
   @clear='onClear'
   // ...
  >
  </my-cascader>
</template>

总结

使用继承的方式去修改或者扩展第三方的组件库的组件是非常有用的，我们只需要重写对应的方法即可。但是这种做法对template模板来说是不太有好的，如果需要修改template模板的内容，需要整个模板都拷贝过来，然后再修改你需要修改的地方