当使用element-ui时我们有时会感觉到组件的功能不够用,因此我们可能会想到修改源码,但是源码的修改只能对自己的项目有效,那伙伴们的怎么办呢?
此时我们可以使用extends来修改源码~
例如有一个需求是使用image的放大之后:
1.当点到第一张和最后一张时不能再点击了;
2.当点到第一张和最后一张时提示用户已经是第一张了和已经是最后一张了。
当我们查看element-ui的image组件时发现它没有属性控制啥时不能点击,也不能控制点到第几张,此时我们最先想到的是查看源码。
我们看到了一个image-viewer组件,那么我们能否直接运用这个组件呢?
发现这里面有个infinite属性,它默认为true,那么我们只要把它改为false,不就可以了嘛!
所以我们首先在我们的页面中引用el-image-viewer组件,并使用。
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="srcList"
:onSwitch="switchImg"
:initialIndex="initialIndex"
ref="imgView"
>
</el-image-viewer>
import ElImageViewer from "element-ui/packages/image/src/image-viewer"