Vue使用viewer标签实现列表图片点击放大功能

效果图：

实现步骤：
1、安装依赖
npm install v-viewer --save
2、页面引入

import Vue from 'vue';
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer)
Viewer.setDefaults({
    Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

3、图片列表
将上传的内容以对象的形式保存在一个数组中，
进而以JSON格式保存在数据库phoneUrl字段里
phoneUrl=“[{name: ‘dog.jpg’,url: ‘http://www.baidu.com/dog.jpg’},{name: ‘cat.jpg’,url: ‘http://www.baidu.com/cat.jpg’},{name: ‘pig.jpg’,url: ‘http://www.baidu.com/pig.jpg’}]”

<el-form-item label="图片" prop="phoneUrl">
  <viewer :images="phoneList">
    <img v-for="(item, index) in phoneList" :key="index" :src="item" width="200px" height="120px">
  </viewer>
</el-form-item>

data() {
  return {
	phoneList: [],
	phoneUrl: []
  }
}

if (JSON.stringify(this.phoneList) !== '[]' 
  || Object.keys(this.phoneList).length !== 0){            
    this.phoneList.splice(0,this.phoneList.length)
}
this.phoneUrl = JSON.parse(row.phoneUrl);
for(let i in this.phoneUrl){
  this.phoneList.push(this.phoneUrl[i].url)
}