pic-viewer
Advanced tools
图片画廊。
el-table）string、JSON string、string[]、object[]vue@2npm add pic-viewer
<template>
<PicViewer v-bind="{/* 局部配置 */}" />
</template>
<script>
import 'pic-viewer/dist/style.css'
import PicViewer from 'pic-viewer'
export default {
components: { PicViewer },
}
</script>
npm add pic-viewer
import 'pic-viewer/dist/style.css'
import PicViewer from 'pic-viewer'
Vue.use(PicViewer, {
// 全局配置
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://unpkg.com/pic-viewer@0.6/dist/style.css"
>
</head>
<body>
<div id="app">
<pic-viewer
value="xxx"
qrcode
></pic-viewer>
</div>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@2/dist/vue.esm.browser.min.js",
"pic-viewer": "https://unpkg.com/pic-viewer@0.6/dist/pic-viewer.mjs"
}
}
</script>
<script type="module">
import Vue from 'vue'
import PicViewer from 'pic-viewer'
new Vue({
components: { PicViewer },
}).$mount('#app')
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://unpkg.com/pic-viewer@0.6/dist/style.css"
>
</head>
<body>
<div id="app">
<pic-viewer
value="xxx"
qrcode
></pic-viewer>
</div>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/pic-viewer@0.6"></script>
<script>
new Vue({
components: { PicViewer },
}).$mount('#app')
</script>
</body>
</html>
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 图片源 | string, string[], object[] | |
| pattern | 展示模式（waterfall, swiper 或 table-cell） | string | undefined（即文档流） |
| viewerjs | 是否启用 viewerjs | boolean | true |
| viewerjsProps | viewerjs 的参数 | object | { zIndex: 5000, zoomRatio: 0.4 } |
| srcAt | 指定图片源所在的键（如果 value 为 object[] 类型） | string | |
| swiperProps | swiper 的参数 | object | { observer: true } |
| qrcode | 是否将 value 转换为二维码 | boolean, 'auto' | false |
| qrcodeProps | qrcode 的参数 | object | { margin: 0, errorCorrectionLevel: 'L', width: 444, height: 444 } |
如果将 qrcode 设为 'auto'，pic-viewer 会自动判断是否需要转换（value 为 Base64 或 URL 时不会转换）
| 名称 | 说明 | 参数 |
|---|---|---|
| click | 点击图片后触发 | { src, index } |
| 名称 | 说明 |
|---|---|
| 默认插槽 | 自定义 img 标签 |
<!-- 示例 -->
<PicViewer>
<template v-slot="{ src, index }">
<img :src="src" alt="">
<div>第{{ index + 1 }}张</div>
</template>
</PicViewer>
| 名称 | 说明 | 参数 |
|---|---|---|
| preview | 手动预览 | 数组下标，默认值为0 |
手动调用预览，不再外部展示
<PicViewer :value="" v-show="false" ref="PicViewer"/>
<button @click="()=>{$refs.PicViewer.preview(6)}">preview</button>
默认的图片 CSS 高度为148px（与 el-upload 保持一致），默认的二维码分辨率为444×444（三倍图），如果你增大了图片的 CSS 尺寸，将导致图片变模糊
解决: 将二维码分辨率设置为展示尺寸的三倍
<!-- 示例 -->
<template>
<PicViewer
:qrcodeProps="{
width: 900,
height: 900,
}"
/>
</template>
<style scoped>
::v-deep .pic-viewer img {
width: 300px;
height: 300px;
}
</style>
<template>
<PicViewer
ref="picViewer" pattern="swiper" :swiperProps="{
on: {
init: onSwiperInit,
},
}"
/>
</template>
<script>
import 'pic-viewer/dist/style.css'
import PicViewer from 'pic-viewer'
export default {
components: { PicViewer },
data() {
return {
swiper: null
}
},
methods: {
onSwiperInit() {
this.$nextTick(() => {
this.swiper = this.$refs.picViewer.swiper
})
}
}
}
</script>
各版本详细改动请参考 release notes 。
FAQs
Picture viewer.
The npm package pic-viewer receives a total of 6 weekly downloads. As such, pic-viewer popularity was classified as not popular.
We found that pic-viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."