该博客介绍了如何在基于Ant Design Vue的项目中实现图片预览和放大功能。通过使用a-modal和a-icon组件，鼠标悬停可以放大图片，点击右上角图标可查看原图。示例代码展示了组件使用方法，并提供了组件API，包括imageUrl（图片路径）、imageSize（图片大小）和index（类的序号）等属性。源码可在csdn下载。
实现淘宝图片放大器的效果
描述：
- 将鼠标移入可以实现放大
- 点击右上角图标可以查看原图
- 基于ant-design-vue，使用了a-modal，a-icon组件，可以根据自定义删除或更换
效果如下
使用展示：
<div slot="submit_avatar" slot-scope="text,record, index">
<qm-image-zoom :imageUrl="text" :index="index"></qm-image-zoom>
</div>
组件API
| 属性名称 | 属性值 |
|---|---|
| imageUrl（图片路径） | String |
| imageSize（图片大小） | Number |
| index（类的序号） | Number |
组件源码
csdn下载
扫一扫
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
