1.1.2 • Published 6 months ago
@lx-vue-materiel/img-preview v1.1.2
注意：图片 下载按钮
暂不支持跨域图片下载，如需要支持可与后台协商支持，或者使用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()