vue2 重写第三方组件局部方法

背景

有时候因为业务性功能，需要在当前使用的ui组件上扩展或者复写内部业务。

这里就以element-ui为例，我们需要修改 官方的 image 组件

解决

方案1：混入（mixin）

import { Image } from "element-ui";
export default {
  name: "ReImage",
  mixins: [Image],
  mounted() {},
  computed: {
    // 重写组件内部该方法的实现逻辑
    imageIndex() {
      let previewIndex = 0;
      const srcIndex = this.previewSrcList.indexOf(this.src.split("?")[0]);
      if (srcIndex >= 0) {
        previewIndex = srcIndex;
      }
      return previewIndex;
    }
  }
};

方案2: 扩展（extends）

import { Image } from "element-ui";
export default {
  name: "ReImage",
  mixins: Image,
  mounted() {},
  computed: {
    // 重写组件内部该方法的实现逻辑
    imageIndex() {
      let previewIndex = 0;
      const srcIndex = this.previewSrcList.indexOf(this.src.split("?")[0]);
      if (srcIndex >= 0) {
        previewIndex = srcIndex;
      }
      return previewIndex;
    }
  }
};