解决在前端项目中实现图片中的放大镜功能,可对图片进行局部放大
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.属性设置(根据需求调整放大镜)