vue Mixin的妙用

今天遇到一个问题，element ui组件的图片预览功能有点不符合需求，我们希望显示的小图是通过阿里云路径拼接裁剪过后的，预览的大图才是原图，这样就导致预览有问题了，因为src的路径和preview-src-list路径不一致，因此不能预览当前图片，不管点击哪张图片，总是从头开始。例子如下

<div class="demo-image__preview"> 
    <el-image
        style="width: 100px; height: 100px"
        :src="url"
        :preview-src-list="srcList"> 
    </el-image> 
</div> 
<script> 
export default { 
    data() { 
        return { 
            url: 'https://fuss10.elemecdn.com/1.jpeg?width=100&height=100', 
            srcList: [ 
                'https://fuss10.elemecdn.com/1.jpeg', 
                'https://fuss10.elemecdn.com/2.jpeg' 
            ] 
        }
    }
} 
</script>

看了element ui image组件源码，发现只需要修改其中的一个computed的方法就可以了。element ui中实现预览哪个图片的逻辑代码如下

imageIndex() {
    let previewIndex = 0;
    const srcIndex = this.previewSrcList.indexOf(this.src);
    if (srcIndex >= 0) {
      previewIndex = srcIndex;
    }
    return previewIndex;
}

从代码中可以看出，预览的索引是通过src在previewSrcList中过滤的，那么只要把阿里云拼接的图片从？后剪切，取前面再过滤就可以了，因此只要加入这段代码就可以了

const srcIndex = this.previewSrcList.indexOf(this.src.split("?")[0]);

那么问题来了，直接修改源码恐怕是有很大问题的，比如新的员工来到，让他克隆代码，重新安装包，总不会还要重新改写包的源码吧！更不可能这么点功能去element ui提pr吧！而且就算element ui可以，我们项目也等不及呀！仔细思考，发现这个问题，常常存在于项目之中，就是第三方组件有的时候不符合我们的项目需求，但又不想弃用第三方组件，那么有什么好办法呢？

解决方法:

vue为我们提供了很强的扩展性，甚至复写别人的方法，这个时候Mixin有了很好的发挥，我们可以把一个第三方组件当成一个Mixin，然后我们复写第三方组件，这样既不用修改第三方组件的源码，也能实现我们自己的功能。如何实现，其实vue的每个组件文件都是可以作为一个Mixin的。实现如下

import { Image } from "element-ui";
export default {
  name: "PreviewImage",
  mixins: [Image],
  computed: {
    imageIndex() {
      let previewIndex = 0;
      const srcIndex = this.previewSrcList.indexOf(this.src.split("?")[0]);
      if (srcIndex >= 0) {
        previewIndex = srcIndex;
      }
      return previewIndex;
    }
  }
};

当然这只是复写，还要把复写完的组件重新注册到全局，这样既保持了第三方全部的功能，也实现了我们自己的需求，注册方法如下

// 文件路径@/components/index.js
import Vue from "vue";
import PreviewImage from "@/components/PreviewImage";

Vue.use({
  install(Vue) {
    Vue.component(PreviewImage.name, PreviewImage);
  }
});

最后在main.js中引入即可

import "@/components";