Vue 中使用 viewerjs （大图查看）

安装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>