构建vue单页应用(二)———做一个图片预览功能

1. npm install vue-image-swipe -D

2.vue 入口文件引入

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>

页面显示效果：

 

4.改成接收后台接口返回的图片，需要在项目中假如axios
(1)安装axios:

npm install --save axios

(2)在main.js中引入axios

import axios from 'axios'( 1.import...from...的from命令后面可以跟很多路径格式，若只给出vue，axios这样的包名，则会自动到node_modules中加载；若给出相对路径及文件前缀，则到指定位置寻找。 2.可以加载各种各样的文件：.js、.vue、.less等等。 3.可以省略掉from直接引入)

Vue.prototype.axios = axios (因为axios不是vue的，所以不能用vue.use(axios))

(3)在index.vue中就可以使用了

loadImage(){
      this.axios({
        method: 'post',
        url: '/user/12345',
        data: {
          firstName: 'Fred'
        }
      });
    }

 

 

 

 

转载于:https://www.cnblogs.com/yina-526/p/11044769.html