Have a problem

There was a problem today. The image preview function of Element UI component did not meet the requirement. We wanted the small image to be displayed by alicloud path stitching and clipped, and the large image to preview was the original one. So you can’t preview the current image, and whenever you click on any image, you always start from scratch. Examples are as follows

<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 > duplicate codeCopy the code

Looking at the source code for the Element UI Image component, I found that I only need to modify one of the computed methods. The logical code in Element UI to implement which image to preview is as follows

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

PreviewSrcList = SRC; SRC = “previewSrcList”; I’m just going to cut it and filter it, so I’m just going to add this code

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

So the problem comes, directly modify the source code is afraid there is a big problem, such as new staff to let him clone the code, reinstall the package, the total will not have to rewrite the source code of the package! It’s impossible to do that with element UI. And even if Element UI does, our project can’t wait! After careful thinking, I found that this problem often exists in the project, that is, the third-party components sometimes do not meet the requirements of our project, but we do not want to abandon the third-party components, so what is the good way?

To solve the problem

Vue provides us with very strong scalability, and even copy other people’s methods. Mixin has a good play at this time. We can take a third-party component as a Mixin, and then we can copy the third-party component, so that we do not need to modify the source code of the third-party component, but also can realize our own functions. Every component file in vUE can be used as a Mixin. To achieve the following

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; }}}; Copy the codeCopy the code

Of course, this is only a carbon copy, but also to re-register the components to the global, so as to maintain all the functions of the third party, but also to achieve our own needs, registration method is as follows

// file path @/components/index.js import Vue from "Vue "; import PreviewImage from "@/components/PreviewImage"; Vue.use({ install(Vue) { Vue.component(PreviewImage.name, PreviewImage); }}); Copy the codeCopy the code

Finally, add it to main.js

import "@/components";
Copy the code