vue实现图片放大预览缩放

1.引入viewerjs

npm install viewerjs

2.在main.js中配置

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer,{
  defaultOptions: {
    zIndex: 9999
  }
})
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.引入页面

<template>
	<div>
		<viewer :images="imglist" @inited="inited" ref="viewer" width='100%' style="display: none;">
			<img v-for="src in imglist" :src="src" :key="src" width='100%'>
		</viewer>
	</div>
	<el-button  @click="getsee" type="primary">查看</el-button>
</template>
<script>
	export default {
		data() {
			return {
			imglist:[]//查看图片的集合
			}
		},
		methods: {
			getsee(){
				this.$viewer.show()
			},
			inited(viewer) {
				this.$viewer = viewer
			},
		}
	}
</script>