New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

vue-picture-preview

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-picture-preview

移动端、PC 端 Vue.js 图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

vue-picture-preview

移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.

Github Github Github

License vue-picture-preview NPM downloads NPM downloads

demo

安装

npm install --save vue-picture-preview

使用

入口文件中全局引入

import Vue from 'vue'
import vuePicturePreview from 'vue-picture-preview';

Vue.component('Previewer', vuePicturePreview);

按需局部引入

import vuePicturePreview from 'vue-picture-preview';

export default {
  components: {
    Previewer: vuePicturePreview
  }
}

示例

<div>
    <img
        class="previewer-demo-img"
        v-for="(item, index) in list"
        :src="item.src"
        width="100"
        @click="show(index)"
        :key="index"
      />
      <previewer ref="previewer" :list="list" :options="options"> </previewer>
</div>
export default {
  data() {
    return {
      list: [
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          w: 600,
          h: 400
        }
      ],
      options: {
        getThumbBoundsFn(index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[
            index
          ];
          // get window scroll Y
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    };
  },
  methods: {
    show(index) {
      // 显示特定index的图片,使用ref
      this.$refs.previewer.show(index);
    }
  }
};

属性

名字类型默认值说明版本要求
listarray图片列表v2.0.0
optionsobjectPhotoSwipe的配置v2.0.0

事件

名字参数说明版本要求
@on-close-关闭时触发v2.0.0
@on-index-change-切换图片后触发(首次打开不会触发)v2.0.0

插槽

名字说明版本要求
button-after操作按钮之后,可以添加自定义图标v2.0.0
button-before操作按钮之前,可以添加自定义图标v2.0.0

方法

名字参数说明版本要求
goToindex跳转到特定图片v2.0.0
prev-跳转到上一张v2.0.0
next-跳转到下一张v2.0.0
getCurrentIndex-获取当前图片索引v2.0.0

重要提示

  • 注意避免使用过大图片: 否则可能会出现卡顿黑屏的情况(尤其是在 Android 机子上)
  • 建议为所有图片定义尺寸: PhotoSwipe 本身要求设置宽高,本组件会尝试对没有设置宽高的图片先加载再显示,可能会造成性能问题或者宽带浪费。

Keywords

FAQs

Package last updated on 21 Nov 2019

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc