*首先引入到项目中:下载安装插件:npm i PicZoom --save
*在用到的页面引入:import PicZoom from "vue-piczoom";
上代码:css
<pic-zoom :url="imgurl" :scale="3"></pic-zoom> //:scale是放大的倍数
在data中用 require的方式引入图片
vue
咱们来看效果图:
出来是出来了,可是位置不太对,我想把放大后的图显示在右边,因而我就去看了下它显示的样式。
这个class为mouse-cover-canvas 的就是它,咱们能够对它进行css修改
我在当前这个页面的css中写了样式,可是一点效果都没有,其实不是样式没用,是我写错地方了,仔细看控制台的那张图你会发现他是相对于#app进行定位的,因此我把样式给写到App.vue中果真就有效果了。
npm
学习是一件须要坚持的事,加油哦
canvas