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


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/src/plugins/preview/index.js:
--------------------------------------------------------------------------------
 1 | import Vue2Preview from './preview.vue'
 2 | 
 3 | export default {
 4 |   install(Vue, options) {
 5 |     Vue.mixin({
 6 |       components: {
 7 |         'vue-preview': Vue2Preview
 8 |       }
 9 |     })
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue preview plugin
 2 | 
 3 | > 一个Vue集成[PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)图片预览插件，支持 vue-cli2 和 vue-cli3
 4 | 
 5 | ![](https://img.shields.io/npm/dm/vue2-preview.svg)
 6 | ![](https://img.shields.io/npm/v/vue2-preview.svg)
 7 | 
 8 | ## Requirements
 9 | 
10 | [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)
11 | 
12 | ## Installation
13 | 
14 | ```bash
15 | npm i vue2-preview -S
16 | ```
17 | 
18 | ## Usage
19 | 
20 | ### Install plugin
21 | 
22 | ``` javascript
23 | import VuePreview from 'vue2-preview'
24 | Vue.use(VuePreview)
25 | ```
26 | 
27 | ### Examples
28 | 
29 | ```jsx
30 | <template>
31 |   <div>
32 |     <vue-preview
33 |       :list="list"
34 |       :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
35 |       :previewBoxStyle="{border: '1px solid #eee'}"
36 |       :tapToClose="true"
37 |       @close="closeHandler"
38 |       @destroy="destroyHandler"
39 |     />
40 |   </div>
41 | </template>
42 | 
43 | <script>
44 | export default {
45 |   data() {
46 |     return {
47 |       list: [
48 |         {
49 |           src: 'https://placekitten.com/600/400',
50 |           w: 600,
51 |           h: 600
52 |         },
53 |         {
54 |           src: 'https://placekitten.com/1200/900',
55 |           w: 1200,
56 |           h: 900
57 |         }
58 |       ]
59 |     }
60 |   },
61 |   methods: {
62 |     // 即将关闭的时候，调用这个处理函数
63 |     closeHandler() {
64 |       console.log('closeHandler')
65 |     },
66 |     // 完全关闭之后，调用这个函数清理资源
67 |     destroyHandler() {
68 |       console.log('destroyHandler')
69 |     }
70 |   }
71 | }
72 | </script>
73 | ```
74 | 
75 | ### 参数说明：
76 | 
77 | | 参数  | 说明  |  类型  |  必需
78 | | :--: | :--: | :--:  | :--:
79 | | list      |图片列表       |   Array  |    是
80 | | thumbImageStyle     |缩略图的样式|   Object |    否
81 | | previewBoxStyle     |缩略图容器的样式|   Object |    否
82 | | tapToClose     |是否允许单击关闭|   Boolean |    否
83 | | close     |监听预览窗口关闭的事件(关闭前触发)|   Function |    否
84 | | destroy     |监听预览窗口销毁的事件(关闭后触发)|   Function |    否
85 | 
86 | ## License
87 | 
88 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
89 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue2-preview",
 3 |   "version": "1.0.5",
 4 |   "description": "A Vue2 image preview plugin",
 5 |   "main": "src/plugins/preview/index.js",
 6 |   "scripts": {
 7 |     "dev": "node build/dev-server.js",
 8 |     "build": "node build/build.js",
 9 |     "unit": "karma start test/unit/karma.conf.js --single-run",
10 |     "e2e": "node test/e2e/runner.js",
11 |     "test": "npm run unit && npm run e2e",
12 |     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/daidaitu1314/vue2-preview.git"
17 |   },
18 |   "keywords": [
19 |     "vue",
20 |     "preview",
21 |     "photoswipe"
22 |   ],
23 |   "author": "liulongbin",
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/daidaitu1314/vue2-preview/issues"
27 |   },
28 |   "dependencies": {
29 |     "photoswipe": "^4.1.2"
30 |   },
31 |   "devDependencies": {
32 |     "autoprefixer": "^6.4.0",
33 |     "babel-core": "^6.0.0",
34 |     "babel-eslint": "^7.0.0",
35 |     "babel-loader": "^6.0.0",
36 |     "babel-plugin-transform-runtime": "^6.0.0",
37 |     "babel-preset-es2015": "^6.0.0",
38 |     "babel-preset-stage-2": "^6.0.0",
39 |     "babel-register": "^6.0.0",
40 |     "connect-history-api-fallback": "^1.1.0",
41 |     "css-loader": "^0.25.0",
42 |     "eslint": "^3.7.1",
43 |     "eslint-friendly-formatter": "^2.0.5",
44 |     "eslint-loader": "^1.5.0",
45 |     "eslint-plugin-html": "^1.3.0",
46 |     "eslint-config-standard": "^6.1.0",
47 |     "eslint-plugin-promise": "^2.0.1",
48 |     "eslint-plugin-standard": "^2.0.1",
49 |     "eventsource-polyfill": "^0.9.6",
50 |     "express": "^4.13.3",
51 |     "extract-text-webpack-plugin": "^1.0.1",
52 |     "file-loader": "^0.9.0",
53 |     "function-bind": "^1.0.2",
54 |     "html-webpack-plugin": "^2.8.1",
55 |     "http-proxy-middleware": "^0.17.2",
56 |     "json-loader": "^0.5.4",
57 |     "karma": "^1.3.0",
58 |     "karma-coverage": "^1.1.1",
59 |     "karma-mocha": "^1.2.0",
60 |     "karma-phantomjs-launcher": "^1.0.0",
61 |     "karma-sinon-chai": "^1.2.0",
62 |     "karma-sourcemap-loader": "^0.3.7",
63 |     "karma-spec-reporter": "0.0.26",
64 |     "karma-webpack": "^1.7.0",
65 |     "lolex": "^1.4.0",
66 |     "mocha": "^3.1.0",
67 |     "chai": "^3.5.0",
68 |     "sinon": "^1.17.3",
69 |     "sinon-chai": "^2.8.0",
70 |     "inject-loader": "^2.0.1",
71 |     "isparta-loader": "^2.0.0",
72 |     "phantomjs-prebuilt": "^2.1.3",
73 |     "chromedriver": "^2.21.2",
74 |     "cross-spawn": "^4.0.2",
75 |     "nightwatch": "^0.9.8",
76 |     "selenium-server": "2.53.1",
77 |     "opn": "^4.0.2",
78 |     "ora": "^0.3.0",
79 |     "shelljs": "^0.7.4",
80 |     "url-loader": "^0.5.7",
81 |     "vue": "^2.0.1",
82 |     "vue-loader": "^9.4.0",
83 |     "vue-style-loader": "^1.0.0",
84 |     "webpack": "^1.13.2",
85 |     "webpack-dev-middleware": "^1.8.3",
86 |     "webpack-hot-middleware": "^2.12.2",
87 |     "webpack-merge": "^0.14.1"
88 |   }
89 | }


--------------------------------------------------------------------------------
/src/plugins/preview/preview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- 盛放缩略图的容器 -->
  4 |     <div :style="previewBoxStyle">
  5 |       <img
  6 |         :src="item.src"
  7 |         v-for="(item, i) in list"
  8 |         :key="i"
  9 |         @click="showPreview(i)"
 10 |         :style="thumbImageStyle"
 11 |         class="thumbImg"
 12 |       >
 13 |     </div>
 14 | 
 15 |     <!-- Root element of PhotoSwipe. Must have class pswp. -->
 16 |     <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 17 |       <!-- Background of PhotoSwipe.
 18 |       It's a separate element as animating opacity is faster than rgba().-->
 19 |       <div class="pswp__bg"></div>
 20 | 
 21 |       <!-- Slides wrapper with overflow:hidden. -->
 22 |       <div class="pswp__scroll-wrap">
 23 |         <!-- Container that holds slides.
 24 |         PhotoSwipe keeps only 3 of them in the DOM to save memory.
 25 |         Don't modify these 3 pswp__item elements, data is added later on.-->
 26 |         <div class="pswp__container">
 27 |           <div class="pswp__item"></div>
 28 |           <div class="pswp__item"></div>
 29 |           <div class="pswp__item"></div>
 30 |         </div>
 31 | 
 32 |         <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
 33 |         <div class="pswp__ui pswp__ui--hidden">
 34 |           <div class="pswp__top-bar">
 35 |             <!-- Controls are self-explanatory. Order can be changed. -->
 36 |             <div class="pswp__counter"></div>
 37 | 
 38 |             <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
 39 | 
 40 |             <!-- <button
 41 |               class="pswp__button pswp__button--share"
 42 |               title="Share"
 43 |             ></button>-->
 44 |             <!-- <button
 45 |               class="pswp__button pswp__button--fs"
 46 |               title="Toggle fullscreen"
 47 |             ></button>-->
 48 |             <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 49 | 
 50 |             <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
 51 |             <!-- element will get class pswp__preloader--active when preloader is running -->
 52 |             <div class="pswp__preloader">
 53 |               <div class="pswp__preloader__icn">
 54 |                 <div class="pswp__preloader__cut">
 55 |                   <div class="pswp__preloader__donut"></div>
 56 |                 </div>
 57 |               </div>
 58 |             </div>
 59 |           </div>
 60 | 
 61 |           <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
 62 |             <div class="pswp__share-tooltip"></div>
 63 |           </div>
 64 | 
 65 |           <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
 66 |           <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
 67 | 
 68 |           <div class="pswp__caption">
 69 |             <div class="pswp__caption__center"></div>
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 |     </div>
 74 |   </div>
 75 | </template>
 76 | 
 77 | <script>
 78 | import "photoswipe/dist/photoswipe.css";
 79 | import "photoswipe/dist/default-skin/default-skin.css";
 80 | // Core JS file
 81 | import PhotoSwipe from "photoswipe/dist/photoswipe.min.js";
 82 | // UI JS file
 83 | import PhotoSwipeUIDefault from "photoswipe/dist/photoswipe-ui-default.min.js";
 84 | 
 85 | export default {
 86 |   name: "Vue2Preview",
 87 |   data() {
 88 |     return {};
 89 |   },
 90 |   props: {
 91 |     // 需要进行预览的图片
 92 |     list: {
 93 |       // 数据类型
 94 |       type: Array,
 95 |       required: true,
 96 |       default: function() {
 97 |         return [
 98 |           {
 99 |             src: "https://placekitten.com/600/400",
100 |             w: 600,
101 |             h: 400
102 |           },
103 |           {
104 |             src: "https://placekitten.com/1200/900",
105 |             w: 1200,
106 |             h: 900
107 |           }
108 |         ];
109 |       }
110 |     },
111 |     // 默认缩略图的样式
112 |     thumbImageStyle: {
113 |       type: Object,
114 |       default: function() {
115 |         return {
116 |           width: "100px",
117 |           height: "100px",
118 |           margin: "10px",
119 |           cursor: "pointer"
120 |         };
121 |       }
122 |     },
123 |     // 默认缩略图容器的样式
124 |     previewBoxStyle: {
125 |       type: Object,
126 |       default: function() {
127 |         return {};
128 |       }
129 |     },
130 |     // 是否允许单击关闭
131 |     tapToClose: {
132 |       type: Boolean,
133 |       default: function() {
134 |         return false;
135 |       }
136 |     }
137 |   },
138 |   methods: {
139 |     // 点击图片显示缩略图
140 |     showPreview(i) {
141 |       var pswpElement = document.querySelectorAll(".pswp")[0];
142 | 
143 |       // define options (if needed)
144 |       var options = {
145 |         // 默认展示第几张图片
146 |         index: i, // start at first slide
147 |         // 点击关闭
148 |         tapToClose: this.tapToClose,
149 |         // 实现打开缩略图的动画效果
150 |         getThumbBoundsFn: function(index) {
151 |           // 获取页面上对应点击的图片
152 |           var thumbnail = document.querySelectorAll(".thumbImg")[index];
153 | 
154 |           // 获取到页面已经滚动的距离
155 |           var pageYScroll =
156 |             window.pageYOffset || document.documentElement.scrollTop;
157 |           // optionally get horizontal scroll
158 | 
159 |           // get position of element relative to viewport
160 |           var rect = thumbnail.getBoundingClientRect();
161 | 
162 |           // w = width
163 |           return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
164 |         }
165 |       };
166 | 
167 |       // Initializes and opens PhotoSwipe
168 |       var gallery = new PhotoSwipe(
169 |         pswpElement,
170 |         PhotoSwipeUIDefault,
171 |         this.list,
172 |         options
173 |       );
174 |       gallery.init();
175 | 
176 |       // 即将关闭
177 |       gallery.listen("close", () => {
178 |         this.$emit("close");
179 |       });
180 | 
181 |       // Gallery unbinds events
182 |       // (triggers before closing animation)
183 |       gallery.listen("unbindEvents", () => {
184 |         // console.log('unbindEvents')
185 |       });
186 | 
187 |       // 关闭之后清理资源
188 |       gallery.listen("destroy", () => {
189 |         this.$emit("destroy");
190 |       });
191 |     }
192 |   }
193 | };
194 | </script>
195 | 


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