nuxt中vue-piczoom使用心得(此插件不支持ie)

nuxt中vue-piczoom使用心得(此插件不支持ie)

会遇到的问题
1、渲染时有时候canvas的高度会为0;
2、每次退出当前路由不会自动清除canvas节点

解决方式
1、绑定@mouseenter事件

                <div class="current-pic" v-if="piczooshow" ref="piczoom" @mouseenter="handlePicZoomEnter">
                    <client-only>
<!--                        <picZoom
                            :url="currentSrc"
                        ></picZoom>-->
                        <picZoom
                            id="piczoom77"
                            :url="picList[acticeIndex].src"
                        ></picZoom>
                    </client-only>
                </div>

当进入时监测canvas的高度，如果为0.使用Promise函数修改1下url的数值，然后再修改回来

        //监测放大境功能问题
        handlePicZoomEnter(){
            const _this=this;
            console.log(1);
            let index=_this.acticeIndex;//获取当面选中的
            if( index == _this.picList.length-1 ){//监测一下 下标是不是  最后1个。是的话变成第一个。一般来说进入页面，自动是0
                index=0
            }
            let domCanvas=document.querySelector('.mouse-cover-canvas');//获取pic-zoom自动生成的canvas节点
            let height=domCanvas.height//获取高度
            if( !height ){//如果高度为0，则修改下标
                new Promise(resolve => {
                    _this.handleChangeCurrentPic(index+1);
                    resolve();
                }).then(val=>{
                    //将下标修改回来。自动触发。piczoom组件的高度变化，功能正常放大
                    _this.handleChangeCurrentPic(index);
                })
            }
        }

2、监测Vue的beforeRouterLeave生命周期，清除canvas节点;

    beforeRouteLeave(to,from,next){
        let canvasArr=document.querySelectorAll('.mouse-cover-canvas');
        canvasArr.forEach((item,index)=>{
            document.body.removeChild(item)
        })
        next()
    },

结语：如果有遇到同样问题，如上操作没有解决问题的。。很遗憾，请移步百度。。