index.vue页面
<template>
<div style="padding:50px;">
<viewer :options="options" :images="imageList" class="viewer" ref="viewer">
<img v-for="src in imageList" :src="src" :key="src" width="350" height="350" class="imgClass">
</viewer>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
options:{}, // 配置项，看官网
imageList: [
require('@/assets/swiper/10.jpg'),
require('@/assets/swiper/9.jpg'),
require('@/assets/swiper/8.jpg'),
// require('@/assets/swiper/7.jpg'),
require('@/assets/swiper/6.jpg'),
require('@/assets/swiper/5.jpg'),
require('@/assets/swiper/4.jpg'),
require('@/assets/swiper/3.jpg'),
require('../../assets/swiper/2.jpg'),
require('../../assets/swiper/1.jpg'),
'https://file.iviewui.com/images/image-demo-2.jpg',
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
],
}
},
mounted() {
},
methods: {
},
}
</script>
<style scoped>
.imgClass {
margin-right:20px;
cursor: pointer;
}
.imgClass:active {
transform: scale(0.99);
}
</style>
<!--
注意：版本 "v-viewer": "^1.6.4",
https://juejin.cn/post/7221075271202324538 配置项
-->
main.js页面
import Vue from 'vue'
import App from './App.vue'
// v-viewer 图片预览插件
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
当然也可以不放在main中注册成全局的，直接放在组件中引入也行
我使用的版本是 "v-viewer": "^1.6.4",不是这个版本的话，main.js引入会报错
