由於vue只支持ie9以上版本，所以這個插件也是一樣的

效果圖：

第一步，在goodsinfo文件中引入css

<style scoped>
@import "../../statics/site/js/jqueryplugins/jqimgzoom/css/magnifier.css";
</style>

第二步，在goodsinfo.vue文件中寫一些html結構

<div class="magnifier" id="magnifier1">

    <div class="magnifier-container">
        <div class="images-cover"></div>
        <!--當前圖片顯示容器-->
        <div class="move-view"></div>
        <!--跟隨鼠標移動的盒子-->
    </div>
    <div class="magnifier-assembly">
        <div class="magnifier-btn">
            <span class="magnifier-btn-left">&lt;</span>
            <span class="magnifier-btn-right">&gt;</span>
        </div>
        <!--按鈕組-->
        <div class="magnifier-line">
            <ul class="clearfix animation03">
                <li>
                    <div class="small-img">
                        <img src="images/1.png" />
                    </div>
                </li>
                <li>
                    <div class="small-img">
                        <img src="images/2.png" />
                    </div>
                </li>
                <li>
                    <div class="small-img">
                        <img src="images/3.png" />
                    </div>
                </li>
                <li>
                    <div class="small-img">
                        <img src="images/4.png" />
                    </div>
                </li>
                <li>
                    <div class="small-img">
                        <img src="images/1.png" />
                    </div>
                </li>
            </ul>
        </div>
        <!--縮略圖-->
    </div>
    <div class="magnifier-view"></div>
    <!--經過放大的圖片顯示容器-->

</div>

第三步：在goodsinfo.vue文件中導入js

備註（其實是需要導入jquery的，但是我已經在main裏導入了，所以在這裏就不導入了）

<script>
import "../../statics/site/js/jqueryplugins/jqimgzoom/js/magnifier.js";

</script>

第四步：在goodsinfo.vue文件中初始化插件

<script>
updated() {
setTimeout(() => {
$("#magnifier1").imgzoon({ magnifier: "#magnifier1" });
}, 
 
200);
}
</script>

至此，搞定啦，有木有非常簡單呢，吃飯去吧

封裝了一個電商放大鏡移入放大的功能，適用於VUE