踩坑-vue項目放大鏡特效 放大後圖片位置的修改

使用vue-piczoom插件實現放大鏡功能

*首先引入到項目中：下載安裝插件：npm i PicZoom --save
*在用到的頁面引入：import PicZoom from "vue-piczoom";
上代碼：

<pic-zoom :url="imgurl" :scale="3"></pic-zoom>
   //：scale是放大的倍數

在data中用 require的方式引入圖片

咱們來看效果圖：
出來是出來了，可是位置不太對，我想把放大後的圖顯示在右邊，因而我就去看了下它顯示的樣式。
這個class爲mouse-cover-canvas 的就是它，咱們能夠對它進行css修改

我在當前這個頁面的css中寫了樣式，可是一點效果都沒有，其實不是樣式沒用，是我寫錯地方了，仔細看控制檯的那張圖你會發現他是相對於#app進行定位的，因此我把樣式給寫到App.vue中果真就有效果了。

學習是一件須要堅持的事，加油哦