注意:图片 下载按钮
暂不支持跨域图片下载,如需要支持可与后台协商支持,或者使用img.onload + HTMLCanvasElement.toDataURL() 自定义下载按钮,(该方法不支持png透明背景图片)
组件形式打开
<ImgPreview
:imgsData="imgsData"
:showIndex="showIndex"
:visible.sync="visible"
:options="{}"
></ImgPreview>
- 传入props
props |
说明 |
类型 |
默认值 |
visible.sync |
预览组件是否展示 |
boolean |
false |
imgsData |
图片数组,请传入字符串数组格式 |
array |
[] |
showIndex |
展示图片索引 |
number |
0 |
options |
配置对象 |
object |
{} |
- 配置对象options说明,不传代表默认
key |
说明 |
类型 |
默认值 |
clickMaskClose |
点击mask是否关闭图片 |
boolean |
false |
closeIcon |
是否展示关闭按钮 |
boolean |
true |
width |
图片默认显示宽度。 高度自适应 |
number |
800 |
scale |
缩放 按钮 |
boolean |
true |
rotateLeft |
顺时针旋转 按钮 |
boolean |
true |
rotateRight |
逆时针旋转 按钮 |
boolean |
false |
download |
下载 按钮 |
boolean |
false |
stepScale |
缩放step (建议不修改) |
number |
0.1 |
maxScale |
最大放大倍数 (建议不修改) |
number |
5 |
minScale |
最小放大倍数 (建议不修改) |
number |
0.1 |
stepRotate |
默认每次旋转度数 90 度 (建议不修改) |
number |
90 |
isAnimation |
是否执行缩放等动画 (建议不修改) |
boolean |
true |
downloadName |
下载图片名称 |
string |
'timp.jpg' |
- 提供插槽slot name=previewEdit 可自定义底部按钮,传递参数index 当前图片的索引值
引入调用和全局引入调用形式打开HTMLCanvasElement.toDataURL()
- 引入调用
import imgPreview from '@lx-vue-materiel/img-preview';
// 展示
ImgPreview.visible({
imgsData: [], // 图片数组,请传入字符串数组格式
showIndex: 0, // 展示图片索引
options: {} // 配置对象
})
// 隐藏
ImgPreview.hide()
- 全局引入调用
import imgPreview from '@lx-vue-materiel/img-preview';
Vue.use(ImgPreview)
// 展示
this.ImgPreview.visible({
imgsData: [], // 图片数组,请传入字符串数组格式
showIndex: 0, // 展示图片索引
options: {} // 配置对象
})
// 隐藏
this.ImgPreview.hide()