├── LICENSE
├── README.md
├── package.json
└── src
    └── plugins
        └── preview
            ├── index.js
            └── preview.vue


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 李天成
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue preview plugin
 2 | 
 3 | > 一个Vue集成[PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)图片预览插件
 4 | 
 5 | > 此插件并没有提供新的功能, 只是在原vue-preview插件基础之上简化了操作, 无需使用`vue-preview`组件, 直接使用`img`标签绑定点击事件即可
 6 | 
 7 | ![](https://img.shields.io/npm/dm/vue-pic-preview.svg)
 8 | ![](https://img.shields.io/npm/v/vue-pic-preview.svg)
 9 | 
10 | ## Requirements
11 | 
12 | [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)
13 | 
14 | ## Based on
15 | 
16 | [vue-preview](https://github.com/LS1231/vue-preview)
17 | 
18 | ## Installation
19 | 
20 | ``` bash
21 | npm i vue-pic-preview -S
22 | ```
23 | 
24 | ## Usage
25 | 
26 | 使用须知：
27 | 
28 | * 插件目前仅支持vue2.0以上版本
29 | * img标签上的class不能去掉
30 | 
31 | 如果你是使用vue-cli生成的项目，可能需要你修改`webpack.base.conf.js`文件中的loaders，添加一个loader。
32 | 原因：插件编写中使用了es6的语法，需要进行代码编译
33 | ``` javascript
34 | {
35 |     test: /vue-preview.src.*?js$/,
36 |     loader: 'babel'
37 | }
38 | ```
39 | 
40 | ### Install plugin
41 | 
42 | ``` javascript
43 | import VuePreview from 'vue-pic-preview'
44 | Vue.use(VuePreview)
45 | ```
46 | 
47 | ### Examples
48 | 
49 | ```
50 | <template>
51 |   <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">
52 | </template>
53 | 
54 | <script>
55 | export default {
56 |     data () {
57 |       return {
58 |         list: [{
59 |           src: 'https://placekitten.com/600/400',
60 |           w: 600,
61 |           h: 400
62 |         }, {
63 |           src: 'https://placekitten.com/1200/900',
64 |           w: 1200,
65 |           h: 900
66 |         }]
67 |       }
68 |     }
69 |   }
70 | </script>
71 | ```
72 | 
73 | ### Mothods
74 | 
75 | 插件提供以下两个方法,```vm```代表组件实例
76 | 
77 | #### vm.$preview.open(index, list, options)
78 | 
79 | 参数说明：
80 | 
81 | | 参数  | 说明  |  类型  |  必需
82 | | :--: | :--: | :--:  | :--:
83 | | index     |当前图片的索引值|   Number |    是
84 | | list      |图片列表       |   Array  |    是
85 | | options   |预览插件的配置选项（[参考PhotoSwipe配置](http://photoswipe.com/documentation/options.html)）  |  Object  |    否
86 | 
87 | #### vm.$preview.close()
88 | 
89 | 
90 | ## License
91 | 
92 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
93 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-pic-preview",
 3 |   "version": "1.0.1",
 4 |   "description": "A Vue2 image preview plugin based on vue-preview",
 5 |   "main": "src/plugins/preview/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/TianchengLee/vue-pic-preview.git"
12 |   },
13 |   "dependencies": {
14 |     "photoswipe": "^4.1.1"
15 |   },
16 |   "keywords": [
17 |     "vue",
18 |     "preview",
19 |     "photoswipe"
20 |   ],
21 |   "author": "TianchengLee",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/TianchengLee/vue-pic-preview/issues"
25 |   },
26 |   "homepage": "https://github.com/TianchengLee/vue-pic-preview#readme"
27 | }
28 | 


--------------------------------------------------------------------------------
/src/plugins/preview/index.js:
--------------------------------------------------------------------------------
 1 | import PreviewComponent from './preview.vue'
 2 | var $vm = null
 3 | export default {
 4 |   install: function (Vue) {
 5 |     var Preview = Vue.extend(PreviewComponent)
 6 |     if (!$vm) {
 7 |       $vm = new Preview({ el: document.createElement('div') })
 8 |       document.body.appendChild($vm.$el)
 9 |     }
10 |     const preview = {
11 |       open: function (index, list, params) {
12 |         $vm.open(index, list, params)
13 |       },
14 |       close: function () {
15 |         $vm.close()
16 |       }
17 |     }
18 |     Vue.$preview = preview
19 |     Vue.mixin({
20 |       created: function () {
21 |         this.$preview = Vue.$preview
22 |       }
23 |     })
24 |   }
25 | }


--------------------------------------------------------------------------------
/src/plugins/preview/preview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  3 |     <!-- Background of PhotoSwipe.
  4 |     It's a separate element as animating opacity is faster than rgba().-->
  5 |     <div class="pswp__bg"></div>
  6 | 
  7 |     <!-- Slides wrapper with overflow:hidden. -->
  8 |     <div class="pswp__scroll-wrap">
  9 |       <!-- Container that holds slides.
 10 |           PhotoSwipe keeps only 3 of them in the DOM to save memory.
 11 |       Don't modify these 3 pswp__item elements, data is added later on.-->
 12 |       <div class="pswp__container">
 13 |         <div class="pswp__item"></div>
 14 |         <div class="pswp__item"></div>
 15 |         <div class="pswp__item"></div>
 16 |       </div>
 17 | 
 18 |       <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
 19 |       <div class="pswp__ui pswp__ui--hidden">
 20 |         <div class="pswp__top-bar">
 21 |           <!--  Controls are self-explanatory. Order can be changed. -->
 22 |           <div class="pswp__counter"></div>
 23 | 
 24 |           <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
 25 |           
 26 |           <button class="pswp__button pswp__button--share" title="Share"></button>
 27 |           
 28 |           <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
 29 |           
 30 |           <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 31 | 
 32 |           <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
 33 |           <!-- element will get class pswp__preloader--active when preloader is running -->
 34 |           <div class="pswp__preloader">
 35 |             <div class="pswp__preloader__icn">
 36 |               <div class="pswp__preloader__cut">
 37 |                 <div class="pswp__preloader__donut"></div>
 38 |               </div>
 39 |             </div>
 40 |           </div>
 41 |         </div>
 42 | 
 43 |         <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
 44 |           <div class="pswp__share-tooltip"></div>
 45 |         </div>
 46 | 
 47 |         <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
 48 |         
 49 |         <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
 50 | 
 51 |         <div class="pswp__caption">
 52 |           <div class="pswp__caption__center"></div>
 53 |         </div>
 54 |       </div>
 55 |     </div>
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script>
 60 | import PhotoSwipe from "photoswipe/dist/photoswipe";
 61 | import UI from "photoswipe/dist/photoswipe-ui-default";
 62 | export default {
 63 |   methods: {
 64 |     open(
 65 |       index,
 66 |       list,
 67 |       params = {
 68 |         captionEl: false,
 69 |         fullscreenEl: false,
 70 |         history: false,
 71 |         shareEl: false,
 72 |         tapToClose: true
 73 |       }
 74 |     ) {
 75 |       let options = Object.assign(
 76 |         {
 77 |           index: index,
 78 |           getThumbBoundsFn(index) {
 79 |             let thumbnail = document.querySelectorAll(".preview-img")[index];
 80 |             let pageYScroll =
 81 |               window.pageYOffset || document.documentElement.scrollTop;
 82 |             let rect = thumbnail.getBoundingClientRect();
 83 |             return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
 84 |           }
 85 |         },
 86 |         params
 87 |       );
 88 |       this.photoswipe = new PhotoSwipe(this.$el, UI, list, options);
 89 |       this.photoswipe.init();
 90 |     },
 91 |     close() {
 92 |       this.photoswipe.close();
 93 |     }
 94 |   }
 95 | };
 96 | </script>
 97 | 
 98 | <style>
 99 | @import "photoswipe/dist/photoswipe.css";
100 | @import "photoswipe/dist/default-skin/default-skin.css";
101 | </style>
102 | 


--------------------------------------------------------------------------------