Pic Viewer
图片画廊。
特性
- Viewer.js + Swiper + node-qrcode 组合
- 多样的展示形式：文档流/瀑布流/轮播图/表格嵌套
- 灵活的数据类型：URL/Base64/二维码/object URL
- 任意绑定值类型
- 局部注册并传参，或全局注册并传参
安装
局部注册
npm i yj-pic-viewer<template>
<PicViewer
v-bind="{
/* 局部配置 */
}"
/>
</template>
<script>
import PicViewer from 'yj-pic-viewer'
export default {
components: { PicViewer }
}
</script>全局注册
npm i yj-pic-viewerimport PicViewer from 'yj-pic-viewer'
Vue.use(PicViewer, {
// 全局配置
})属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 绑定值 | any | |
| pattern | 展示模式（'waterfall', 'swiper' 或 'table-cell'） |
string |
undefined（即文档流） |
| width | 图片统一宽度, 可在数据项单独配置每一张图片的不同宽高 | string | 148px |
| height | 图片统一高度, 可在数据项单独配置每一张图片的不同宽高 | string | auto |
| tableCellHeight |
pattern 为 'table-cell' 模式时的高度 |
string | 50px |
| srcAt | 图片 src 的位置 |
string / symbol / (value: any) => any | |
| viewerjs | 是否启用 Viewer.js | boolean | true |
| viewerjsProps | Viewer.js 的参数 | object | { zIndex: 5000, zoomRatio: 0.4 } |
| swiperProps | Swiper 的参数 | object | { observer: true } |
| qrcode | 是否将 value 转换为二维码 |
boolean / 'auto'
|
false |
| qrcodeProps | node-qrcode 的参数 | object | { margin: 0, errorCorrectionLevel: 'L', width: 444, height: 444 } |
qrcode
如果将 qrcode 设为 'auto'，PicViewer 会自动判断是否需要转换 (value 为 Base64 或 URL 时不会转换)。
srcAt
用于定位 value 中的图片 src，适用于绑定值非 src 本身的情况。
- 支持属性名，如
'url' - 支持属性路径，如
'data[0].url' - 支持 symbol 类型的属性名
- 支持 Function，如
({ url }) => url
事件
| 名称 | 说明 | 回调参数 |
|---|---|---|
| click | 点击图片后触发 | (src: string, index: number) |
插槽
| 名称 | 说明 |
|---|---|
| 默认插槽 | 自定义 img 标签 |
<PicViewer>
<template #default="{ src, index }">
<img :src="src" />
<div>第{{ index + 1 }}张</div>
</template>
</PicViewer>获取 Viewer.js 实例
picViewerRef.value.viewer.view()
获取 Swiper 实例
<template>
<PicViewer
ref="picViewerRef"
pattern="swiper"
:swiperProps="{
on: {
init: () => {
$nextTick(() => {
console.log(picViewerRef.swiper)
})
}
}
}"
/>
</template>
<script setup>
import PicViewer from 'yj-pic-viewer'
const picViewerRef = ref()
</script>二维码清晰度
默认的图片 CSS 高度为 148px (与 el-upload 保持一致)，默认的二维码分辨率为 444 × 444 (三倍图)，如果你增大了图片的 CSS 尺寸，将导致图片变模糊。
解决方式：将二维码分辨率设置为展示尺寸的三倍。
<template>
<PicViewer
:qrcodeProps="{
width: 900,
height: 900
}"
/>
</template>
<style scoped>
:deep(.pic-viewer) img {
width: 300px;
height: 300px;
}
</style>