vue-gallery的应用（图片预览）

vue-gallery是一款支持图片预览的前端插件，测试后是可以使用的，我们来先容一下如何使用vue-gallery
  参考网址：vue-gallery - npm
  第1步：安装vue-gallery

1. npm install vue-gallery --save

复制代码

第2步：在vue文件中的导入

1. <script>
2. import VueGallery from 'vue-gallery';
3. export default {
4.     components: {VueGallery}
5. }
6. </script>

复制代码

第3步：测试案例，在单独的vue文件中应用

1. <template>
2.   <div>
3.     <gallery :images="images" :index="index" @close="index = null"></gallery>
4.     <div
5.       class="image"
6.       v-for="(image, imageIndex) in images"
7.       :key="imageIndex"
8.       @click="index = imageIndex"
9.       :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
10.     ></div>
11.   </div>
12. </template>
14. <script>
15.   import VueGallery from 'vue-gallery';
16.   
17.   export default {
18.     data: function () {
19.       return {
20.         images: [
21.           'https://dummyimage.com/800/ffffff/000000',
22.           'https://dummyimage.com/1600/ffffff/000000',
23.           'https://dummyimage.com/1280/000000/ffffff',
24.           'https://dummyimage.com/400/000000/ffffff',
25.         ],
26.         index: null
27.       };
28.     },
30.     components: {
31.       'gallery': VueGallery
32.     },
33.   }
34. </script>
36. <style scoped>
37.   .image {
38.     float: left;
39.     background-size: cover;
40.     background-repeat: no-repeat;
41.     background-position: center center;
42.     border: 1px solid #ebebeb;
43.     margin: 5px;
44.   }
45. </style>

复制代码

下面代码是结合element-ui和el-image来使用vue-gallery。大家可以直接拿下面的代码测试，先截图，然后附上代码
  

  

1. <template>
2.   <div class="about">
3.     <div>
4.       <el-row>
5.         <el-col :span="24">
6.           <el-form :inline="true" :model="formInline" class="demo-form-inline">
7.             <el-form-item label="名称">
8.               <el-input v-model="formInline.user" placeholder="请输入电影名称"></el-input>
9.             </el-form-item>
10.             <el-form-item label="状态">
11.               <el-select v-model="formInline.region" placeholder="请选择电影状态">
12.                 <el-option label="待放映" value="0"></el-option>
13.                 <el-option label="已上映" value="1"></el-option>
14.                 <el-option label="停止上映" value="2"></el-option>
15.               </el-select>
16.             </el-form-item>
17.             <el-form-item>
18.               <el-button type="primary" @click="onSubmit">查询</el-button>
19.               <el-button type="warning">重置</el-button>
20.             </el-form-item>
21.           </el-form>
22.         </el-col>
23.       </el-row>
24.       <div style="height: 10px;"></div>
25.       <div>
26.         <el-row>
27.           <el-col :span="24">
28.             <el-button type="danger" @click="onSubmit">新增</el-button>
29.             <el-button type="primary" @click="onSubmit">批量删除</el-button>
30.           </el-col>
31.         </el-row>
32.       </div>
33.       <div style="height: 10px;"></div>
34.       <el-row>
35.         <el-col :span="24">
36.           <el-table :data="tableData" style="width: 100%" border>
37.             <el-table-column type="selection" width="55"></el-table-column>
38.             <el-table-column prop="name" label="中文名称" width="180"></el-table-column>
39.             <el-table-column prop="english" label="英文名称" width="180" :show-overflow-tooltip="true"></el-table-column>
40.             <el-table-column prop="date" label="上映时间" width="180"></el-table-column>
41.             <el-table-column prop="times" label="电影时长" width="180"></el-table-column>
42.             <el-table-column prop="category" label="电影类型" width="180">
43.               <template slot-scope="scope">
44.                 <el-tag type="danger" v-for="(item,index) in scope.row.category" :key="index" style="margin-right:5px;">{{ item }}</el-tag>
45.               </template>
46.             </el-table-column>
47.             <el-table-column prop="language" label="语言类型" width="180"></el-table-column>
48.             <el-table-column prop="desc" label="电影简介" width="180" :show-overflow-tooltip="true"></el-table-column>
49.             <el-table-column prop="img" label="电影图片" width="180">
50.               <template slot-scope="scope">
51.                 <el-image style="width: 40px; height: 40px; border-radius: 5px;" fit="cover" :src="scope.row.img" @click="openGallery(0, scope.row.img)"></el-image>
52.               </template>
53.             </el-table-column>
54.             <el-table-column prop="area" label="制作区域" width="180"></el-table-column>
55.             <el-table-column prop="status" label="电影状态" width="180">
56.               <template slot-scope="scope">
57.                 <el-tag v-if="scope.row.status === '待放映'">{{ scope.row.status }}</el-tag>
58.                 <el-tag v-else-if="scope.row.status === '已上映'" type="success">{{ scope.row.status }}</el-tag>
59.                 <el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
60.               </template>
61.             </el-table-column>
62.             <el-table-column label="操作" fixed="right" width="100">
63.               <template>
64.                 <el-button size="small" type="text">编辑</el-button>
65.                 <el-button size="small" type="text">删除</el-button>
66.               </template>
67.             </el-table-column>
68.           </el-table>
69.         </el-col>
70.       </el-row>
71.       <div style="height:10px;"></div>
72.       <el-row>
73.         <el-col :span="24" style="text-align: right;">
74.           <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
75.         </el-col>
76.       </el-row>
77.     </div>
79.     <!-- 图片预览画廊 -->
80.     <vue-gallery :images="imageList" @close="currentImageIndex = null" :index="currentImageIndex" />
81.   </div>
82. </template>
83. <script>
84. import VueGallery from 'vue-gallery';
86. export default {
87.   name: 'about',
88.   components: {
89.     VueGallery
90.   },
91.   data() {
92.     return {
93.       formInline: {
94.         user: '',
95.         region: ''
96.       },
97.       tableData: [{
98.         date: '2016-05-02',
99.         name: '最后里程',
100.         english: 'Last mile',
101.         address: '上海市普陀区金沙江路 1518 弄',
102.         desc: '11月，即将到来的全球最大购物活动之一“黑色星期五”前夜，发生了一起快递箱爆炸事件。很快，这起事件演变成了让整个日本陷入恐慌的连续爆炸事件。物流仓库的新任主管·舟渡艾蕾娜(满岛光 饰)和团队经理·梨本孔(冈田将生 饰)一同应对这场前所未有的危机！ 是谁？为什么安放炸弹? 剩下的炸弹还有多少？现在在哪里? 物流是现代社会的生命线，如何才能阻止这个连续爆破事件？当谜题被解开时，这个世界所隐藏真面目将浮出水面。',
103.         status: '待放映',
104.         times: '120',
105.         category: ['惊恐', '剧情'],
106.         language: '中文',
107.         area: '日本',
108.         img: require('@/imgs/1730963678636.jpg')
109.       }, {
110.         date: '2016-05-04',
111.         name: '爱情神话',
112.         english: 'B for Busy',
113.         address: '上海市普陀区金沙江路 1517 弄',
114.         desc: '老白是一位来自上海的离异退休绘画教师，他爱上了一位同样离异的李小姐。他的前妻蓓蓓和他的一个学生的介入让整个事情变得复杂起来。在上海的弄堂里，一个男人和三个女人的故事徐徐拉开序幕。',
115.         status: '已上映',
116.         times: '110',
117.         category: ['惊恐', '剧情', '科幻'],
118.         language: '英文',
119.         area: '中国大陆',
120.         img: require('@/imgs/1730356252740.jpg')
121.       }, {
122.         date: '2016-05-01',
123.         name: '伟大征程',
124.         english: 'THE GREAT JOURNEY',
125.         name: '王小虎',
126.         address: '上海市普陀区金沙江路 1519 弄',
127.         desc: '国内首部4K全景声大型情景史诗舞台艺术电影。',
128.         status: '待放映',
129.         times: '90',
130.         category: ['戏剧', '剧情'],
131.         language: '法语',
132.         area: '法国',
133.         img: require('@/imgs/1730356090428.jpg')
134.       }, {
135.         date: '2016-05-03',
136.         name: '红色一号：冬日行动',
137.         english: 'RED ONE',
138.         address: '上海市普陀区金沙江路 1516 弄',
139.         desc: '圣诞老人(J·K·西蒙斯 饰)被神秘绑架，北极安保主管(道恩·强森 饰)不得已与全世界最臭名昭著的赏金猎人(克里斯·埃文斯 饰)展开合作，他们寻遍全球、打遍天下，力求拯救圣诞节。',
140.         status: '待放映',
141.         times: '100',
142.         category: ['惊恐', '剧情', '悬疑'],
143.         language: '德语',
144.         area: '德国',
145.         img: require('@/imgs/1730355957307.jpg')
146.       }],
147.       imageList: [],
148.       currentImageIndex: null, // 图片预览索引
149.     }
150.   },
151.   methods: {
152.     onSubmit() {
153.       console.log('submit!');
154.     },
155.     openGallery(index, imgUrl) {
156.       this.imageList = [] // 清空
157.       this.imageList = [imgUrl]
158.       this.currentImageIndex = index
159.     }
160.   }
161. }
162. </script>
163. <style>
164. .about {
165.   text-align: left;
166.   width: 90%;
167.   margin: 0 auto;
168. }
169. .el-tooltip__popper {
170.   max-width: 30%;
171. }
172. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。