# ImgPreview 图片大图
# 安装
$ npm i @hui-pro/img-preview -D
# 或者
$ yarn add @hui-pro/img-preview --dev
# 引入
import Vue from 'vue';
import ImgPreview from '@hui-pro/img-preview';
import '@hui-pro/img-preview/theme/index.scss';
Vue.use(ImgPreview);
# 基础用法
<template>
<el-button type="default" @click="preview('basic')">
预览
</el-button>
<h-img-preview ref="basic" :data="urls" :visible.sync="basic" />
<el-button type="default" @click="preview('single')">
单图预览
</el-button>
<h-img-preview ref="single" :data="urls2" :visible.sync="single" />
</template>
<script>
export default {
data() {
return {
urls: [
require('./assets/img/img-carousel/1.jpg'),
require('./assets/img/img-carousel/2.jpg')
],
urls2: [require('./assets/img/img-carousel/1.jpg')]
};
},
methods: {
preview(ref) {
this[ref] = true;
}
}
};
</script>
# 自定义内容
<template>
<el-button type="default" @click="preview('custom')">
自定义内容
</el-button>
<h-img-preview ref="custom" :data="urls2" :visible.sync="custom">
<template slot="top">
<h4 class="h-img-preview__title">
🌟 标题
</h4>
<h4 class="h-img-preview__description">
🎨 描述 1 | 🎲 描述 2
</h4>
</template>
<template slot="btnGroup">
<el-button icon="h-icon-search">
操作一
</el-button>
<el-button icon="h-icon-search">
操作二
</el-button>
<el-button icon="h-icon-search">
操作三
</el-button>
</template>
</h-img-preview>
</template>
<script>
// 参考基础用法
</script>
# 完整示例
<template>
<el-button type="primary" @click="preview('dark')">
dark 预览
</el-button>
<el-button type="default" @click="preview('light')">
light 预览
</el-button>
<h-img-preview
ref="dark"
:visible.sync="dark"
:data="urls"
:currentIndex="1"
:viewData.sync="viewData"
show-album
>
<template slot="top" slot-scope="scope">
<h4 class="h-img-preview__title">
🌟 {{ scope.item.title }}
</h4>
<h4 class="h-img-preview__description">
🎲 {{ scope.item.description }}
</h4>
</template>
<template slot="btnGroup" slot-scope="data">
<el-button icon="h-icon-search" @click="prev">
上一个
</el-button>
<el-button icon="h-icon-search" @click="next">
下一个
</el-button>
<h-img-snippets-zoom
@zoom-out="zoomOut"
@zoom-in="zoomIn"
:scale="viewData.ratio"
/>
<el-button icon="h-icon-search" @click="reset">
适当尺寸
</el-button>
<el-button icon="h-icon-search" @click="selected(0)">
首页
</el-button>
<el-button icon="h-icon-search" @click="selected(8)">
第八个
</el-button>
<el-button icon="h-icon-search" @click="selected(urls.length - 1)">
尾页
</el-button>
</template>
</h-img-preview>
<h-img-preview
ref="light"
theme="light"
:visible.sync="light"
:data="urls"
:currentIndex="1"
:viewData.sync="viewData"
show-album
>
<template slot="top" slot-scope="scope">
<h4 class="h-img-preview__title">
🌟 {{ scope.item.title }}
</h4>
<h4 class="h-img-preview__description">
🎲 {{ scope.item.description }}
</h4>
</template>
<template slot="btnGroup" slot-scope="data">
<el-button icon="h-icon-search" @click="prev">
上一个
</el-button>
<el-button icon="h-icon-search" @click="next">
下一个
</el-button>
<h-img-snippets-zoom
@zoom-out="zoomOut"
@zoom-in="zoomIn"
:scale="viewData.ratio"
/>
<el-button icon="h-icon-search" @click="reset">
适当尺寸
</el-button>
<el-button icon="h-icon-search" @click="selected(0)">
首页
</el-button>
<el-button icon="h-icon-search" @click="selected(8)">
第八个
</el-button>
<el-button icon="h-icon-search" @click="selected(urls.length - 1)">
尾页
</el-button>
</template>
</h-img-preview>
</template>
<script>
import Vue from 'vue';
import ImgPreview from '@hui-pro/img-preview';
import '@hui-pro/img-preview/theme/index.scss';
Vue.use(ImgPreview);
export default {
data() {
return {
basic: false,
single: false,
custom: false,
dark: false,
light: false,
urls: [
require('./assets/img/img-carousel/1.jpg'),
// ...
require('./assets/img/img-carousel/27.jpg')
],
urls2: [require('./assets/img/img-carousel/10.jpg')],
ref: null,
viewData
};
},
created() {
this.urls = this.urls.map((item, index) => {
return {
url: item,
title: `图片标题 ${index}`,
description: `图片描述 ${index}`
};
});
this.urls2 = this.urls2.map((item, index) => {
return {
url: item,
title: `图片标题 ${index}`,
description: `图片描述 ${index}`
};
});
},
methods: {
preview(ref) {
this.ref = ref;
this[ref] = true;
},
prev() {
this.$refs[this.ref].$prev();
},
next() {
this.$refs[this.ref].$next();
},
selected(index) {
this.$refs[this.ref].$selected(index);
},
handleOnChange(item, index) {
this.reset();
},
zoomIn(type) {
this.$refs[this.ref].$zoomIn();
},
zoomOut(type) {
this.$refs[this.ref].$zoomOut();
},
reset() {
this.$refs[this.ref].$resetImgView();
}
}
};
</script>
# 大数据渲染
<el-button type="default" @click="preview('largeData')">
大数据图片预览
</el-button>
<h-img-preview
ref="largeData"
show-album
:data="urls3"
:visible.sync="largeData"
>
<template slot="top" slot-scope="scope">
<h4 class="h-img-preview__title">
🌟 {{ scope.item.title }}
</h4>
<h4 class="h-img-preview__description">
🎲 {{ scope.item.description }}
</h4>
</template>
</h-img-preview>
TIP
卡顿原因分析：
一、首次打开：控件为了在未打开时不影响页面渲染，采用的是首次打开渲染 dom，后续采用show,hide形式切换，所以首次渲染数据较大会出现少许卡顿。
二、切换卡顿：图片系列采用可视区域渲染，为了保证滑动动画流畅，预加载左右两侧图片。大图保持在 2-3 个 dom 区域，缩略图则是页面宽度能放下的数量 2-3 倍。由于 http 请求队列有上限，所以页面阻塞主要原因在图片请求过多，返回速度较慢有关。控件已做最优处理，渲染能力有限。
建议：从交互上，或数据过滤上规避大量数据。图片服务器开启缓存，浏览器开启缓存。
# API
# Attributes
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| data | 数据 | Array | [] | - |
| data-props | 数据 key 值别名 | Object | - | 对应 data key 名 |
| visible | 是否显示 preview，支持 .sync 修饰符 | Boolean | false | - |
| theme | 主题 | Fixed:String | - | 'light', 'dark' |
| show-album | 是否显示缩略图相册 | Boolean | false | - |
| current-index | 当前项索引 | Number | 0 | - |
| auto-reset | 关闭预览是否自动重置预览状态 | Boolean | true | - |
| img-carousel-props | 大图 img-carousel 参数 | Object | - | 参考 ImgView API |
| album-props | 缩略图 album 参数 | Object | - | 参考 ImgView API |
TIP
img-carousel-props、album-props 支持所有 img-carousel、album 属性
例：
<h-img-preview
ref="basic"
:data="urls"
:visible.sync="basic"
:img-carousel-props="{
noTransition: true
}"
/>
注：属性名需写成驼峰形式
# ImgCarouselProps Rewrite Attributes
| 参数 | 原默认值 | 现默认值 |
|---|---|---|
| single-hide-btn | false | true |
# AlbumProps Rewrite Attributes
| 参数 | 原默认值 | 现默认值 |
|---|---|---|
| always-center | false | true |
# data
| key | 说明 | 可选值 | 默认值 |
|---|---|---|---|
| type | 类型 | 0：图片，1：视频 | 0 |
# dataProps
| key | 说明 | 可选值 | 默认值 |
|---|---|---|---|
| title | 图片 title | - | title |
| type | 图片类型 | - | type |
| url | 图片 src 地址 或 视频地址 | - | url |
| key | 唯一标识 | - | key |
# Event
| 事件名 | 说明 | 参数 |
|---|---|---|
| $open | 显示控件，可使用visible属性控制 | - |
| $close | 关闭控件，可使用visible属性控制 | - |
| $update | 更新控件视图 | - |
TIP
控件使用插槽时更新视图需手动执行$update
# Ref Event
| 事件名 | 说明 | 值 |
|---|---|---|
| on-change | 选中项变化回调 | 数据项 |
| on-zoom | 缩放回调 | scale 当前缩放比例translateX 横向偏移translateY 纵向偏移 |
| on-open | 打开回调 | - |
| on-opened | 完全打开回调 | - |
| on-close | 关闭回调 | - |
| on-closed | 完全关闭回调 | - |
# Ref extends ImgCarousel Event
| 事件名 | 说明 | 参数 |
|---|---|---|
| $prevPage | 上一页 | - |
| $nextPage | 下一页 | - |
| $prev | 上一个 | - |
| $next | 下一个 | - |
| $selected | 选中某一项 | index:选中项索引 |
# Ref extends ImgView Event
TIP
仅对图片生效,即 type：0
| 事件名 | 说明 | 参数 |
|---|---|---|
| $zoomIn | 放大 | - |
| $zoomOut | 缩小 | - |
| $reset | 重置 | - |
| $resetImgView | 重置视图 | - |
# Slots
| 插槽名称 | 说明 |
|---|---|
| top | 顶部自定义内容 |
| btnGroup | 操作按钮组 |
# extends ImgCarousel Slots
| 插槽名称 | 说明 |
|---|---|
| imgCarouselItem | imgCarousel 自定义项 |
# extends Album Slots
| 插槽名称 | 说明 |
|---|---|
| albumItem | albumItem 自定义项 |