npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pic-viewer

v0.12.1

Published

Picture viewer.

Downloads

52

Readme

特性

  • Viewer.js + Swiper + node-qrcode 组合拳
  • 多样的展示形式:文档流/瀑布流/轮播图/表格嵌套
  • 灵活的数据类型:URL/Base64/二维码/object URL
  • 任意绑定值类型

安装

外置依赖

  • vue@2

局部注册

npm i pic-viewer
<template>
  <PicViewer v-bind="{/* 局部配置 */}" />
</template>

<script>
import PicViewer from 'pic-viewer'

export default {
  components: { PicViewer },
}
</script>

全局注册

npm i pic-viewer
import PicViewer from 'pic-viewer'

Vue.use(PicViewer, {
  // 全局配置
})

CDN + ESM

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</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/[email protected]/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>

CDN + IIFE

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</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/[email protected]"></script>
  <script>
    new Vue({
      components: { PicViewer },
    }).$mount('#app')
  </script>
</body>

</html>

属性

| 名称 | 说明 | 类型 | 默认值 | | ------------- | ------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------- | | value | 绑定值 | any | | | pattern | 展示模式('waterfall', 'swiper''table-cell') | string | undefined(即文档流) | | 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 '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>