1. npm install vue-image-swipe -Djavascript
2.vue 入口文件引入css
import Vue from 'vue' import VueImageSwipe from 'vue-image-swipe' import 'vue-image-swipe/dist/vue-image-swipe.css' Vue.use(VueImageSwipe)
3.index.vue頁面中:
1 <template> 2 <div> 3 <div> 4 <ul> 5 <ol 6 :key="index" 7 @click="preview(index)" 8 v-for="(l, index) in images"> 9 <img :src="l" alt=""> 10 </ol> 11 </ul> 12 </div> 13 </div> 14 </template> 15 <script> 16 export default { 17 name: 'app', 18 data() { 19 return { 20 images: [ 21 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png', 22 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png', 23 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png', 24 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png', 25 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png' 26 ] 27 } 28 }, 29 created() { 30 31 }, 32 methods: { 33 preview(index) { 34 this.$imagePreview({ 35 images: this.images, 36 index: index, 37 }) 38 } 39 } 40 } 41 </script> 42 <style scoped> 43 img{ 44 width:215px; 45 height:215px; 46 margin:5px 0px 0px 5px; 47 } 48 ol{ 49 display: inline-block; 50 width:225px; 51 height:225px; 52 margin: 10px; 53 background-repeat:no-repeat; 54 background-color:#fff; 55 cursor:pointer; 56 -moz-box-shadow:1px 1px 3px #000; 57 -webkit-box-shadow:1px 1px 3px #000; 58 box-shadow:1px 1px 3px #000; 59 } 60 </style>
頁面顯示效果:vue

4.改爲接收後臺接口返回的圖片,須要在項目中假如axios
(1)安裝axios:
npm install --save axios
(2)在main.js中引入axiosjava
loadImage(){ this.axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred' } }); }