Vue实现图片放大镜功能之vue-photo-zoom-pro

解决在前端项目中实现图片中的放大镜功能，可对图片进行局部放大
1.安装vue-photo-zoom-pro

npm install vue-photo-zoom-pro

2.html中

<template>
	<vue-photo-zoom-pro>
		<img class='image' :src='imageUrl' alt='暂无数据'/>
	</vue-photo-zoom-pro>
</template>

3.js中

<script>
	//引入
	import vuePhotoZoomPro from 'vue-photo-zoom-pro';
	import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css';#这里的css一定要引入，否则无法使用，官方文档上的引入写错了

	export default{
		components:{
			vuePhotoZoomPro
		}
	}
</script>

4.属性设置（根据需求调整放大镜）