扩展el-image组件

当使用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"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值