项目作者: zhhshen

项目描述 :
基于photoswipe实现的vue图片预览组件
高级语言: Vue
项目地址: git://github.com/zhhshen/vue-image-swipe.git
创建时间: 2018-09-08T12:34:05Z
项目社区:https://github.com/zhhshen/vue-image-swipe

开源协议:MIT License

下载


vue-image-swipe

基于photoswipe实现的vue图片预览组件

安装

1 第一步

  1. npm install vue-image-swipe -D

2 第二步

vue 入口文件引入

  1. import Vue from 'vue'
  2. import VueImageSwipe from 'vue-image-swipe'
  3. import 'vue-image-swipe/dist/vue-image-swipe.css'
  4. Vue.use(VueImageSwipe)

使用

  1. <template>
  2. <div>
  3. hello world
  4. <div>
  5. <ul>
  6. <li
  7. :key="index"
  8. @click="preview(index)"
  9. v-for="(l, index) in images">
  10. <img :src="l" alt="">
  11. </li>
  12. </ul>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. name: 'app',
  19. data() {
  20. return {
  21. images: [
  22. 'http://oayhezji6.bkt.clouddn.com/preview1.jpg',
  23. 'http://oayhezji6.bkt.clouddn.com/preview2.jpg',
  24. 'http://oayhezji6.bkt.clouddn.com/preview3.jpg',
  25. 'http://oayhezji6.bkt.clouddn.com/preview9.jpg',
  26. 'http://oayhezji6.bkt.clouddn.com/preview10.jpg',
  27. 'http://oayhezji6.bkt.clouddn.com/preview6.jpg'
  28. ]
  29. }
  30. },
  31. created() {
  32. },
  33. methods: {
  34. preview(index) {
  35. this.$imagePreview({
  36. images: this.images,
  37. index: index,
  38. })
  39. }
  40. }
  41. }
  42. </script>

methods

只暴露了一个方法this.$imagePreview,并绑定到vue的原型上
使用

  1. this.$imagePreview(options = {})

options有三个参数

参数 默认值 说明
images 空数组 图片的url数组
index 0 预览图片的索引值, 默认是0
defaultOpt {} 配置项

defaultOpt 的配置项请参考photoswipe配置项
注意:不能保证所有配置项都是可用的

列举一些常用的配置

  1. defaultOpt: {
  2. fullscreenEl: true,
  3. shareEl: false,
  4. arrowEl: true,
  5. preloaderEl: true,
  6. loop: false,
  7. bgOpacity: 0.85,
  8. showHideOpacity: true,
  9. errorMsg: '<div class="pswp__error-msg">图片加载失败</div>',
  10. }

demo

demo

LICENSE

MIT