Vue 图片预览组件
vue2.x 请使用 @1.x 版本
npm i fox-preview-image
# or
yarn add fox-preview-image
import foxPreviewImage from "fox-preview-image";
import "fox-preview-image/lib/style.css";
Vue.use(foxPreviewImage)
<fox-preview-image v-model="visiable" :src="imageSrc" z-index="9000"></fox-preview-image>
属性 | 说明 | 参数类型 | 默认值 |
---|---|---|---|
src | 预览图片的地址 | String/Array | - |
visiable/v-model | 是否显示预览窗口 | Boolean | false |
initial-index | 默认显示图片的下标 | Number | 0 |
z-index | 预览窗口的层级-css 的 zIndex | Number | 9000 |
- fix:
- 修复css导入错误
- feat:
- 增加默认显示第几张图片的功能
- feat:
- 增加显示当前图片下标的功能(仅在多图下显示)
- feat:
- 增加 vue3 支持(安装:npm i fox-preview-image@next)
-
refactor:
- 删除冗余代码
-
fix:
- 修复火狐浏览器拖拽失效的问题
- feat:
- 支持鼠标滚轮放大缩小
- feat:
- 增加缩放倍数显示
- fix:
- 修复当预览的图片为 1 张时扔显示左右切换按钮的问题
- fix:
- 修复拖拽时图片未完全跟随鼠标的 bug
- feat:
- 旋转
- 放大,缩小(0.5-2)
- 多张图片可以传数组 eg:['http://xxxx.com/a.png','http://xxxx.com/b.png']