安装viewerjs
npm install viewerjs
viewer.vue
<template>
<div id="index">
<ul>
<li v-for="(item,index) of imgArr"><img :src="item" alt="图片描述"></li>
</ul>
</div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
name: 'HelloWorld',
data() {
return {
imgArr: [
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3272199364,3404297250&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267295166,2381808815&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3429654663,2972188411&fm=26&gp=0.jpg'
]
}
},
mounted() {
const ViewerDom = document.getElementById('index');
const viewer = new Viewer(ViewerDom, {
// 相关配置项,详情见下面
});
}
}
</script>
<style scoped>
* {
padding: 0;
margin: 0;
}
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
width: 265px;
height: 180px;
list-style: none;
border: 2px solid #CCC;
border-radius: 3px;
padding: 1px;
margin: 10px;
cursor: pointer;
}
ul li img {
width: 100%;
height: 100%;
}
</style>