xyxiao001 / vue-cropper

A simple picture clipping plugin for vue
https://github.xyxiao.cn/vue-cropper/docs/vue3.html
MIT License
4.3k stars 695 forks source link

图片设置成功之后,鼠标的滚轮失效,但是滚动条还在 #125

Closed zhangwei900808 closed 6 years ago

zhangwei900808 commented 6 years ago

vue-cropper版本:

    "vue-cropper": "^0.2.9",

template

<Modal
            :closable="false"
            :mask-closable="false"
            v-model="cropperModal.show"
            title="设置企业LOGO"
            width=735
            :styles="{top: '20px',zIndex:99999,height:'100%'}">
            <div style="height:400px;width:100%;">
                <vueCropper
                    v-if="cropperModal.show"
                    ref="cropper"
                    v-bind="cropperModal.config"
                ></vueCropper>
            </div>
            <div slot="footer">
                <Button type="ghost" size="large" @click="btnStepCancel">关闭</Button>
                <Button type="primary" size="large" :loading="saveImg_loading" @click="btnStepOk">确定</Button>
            </div>
        </Modal>

上传成功之后的回调函数:

btnStepOk(){
            this.saveImg_loading = true;
            this.$refs.cropper.getCropBlob((data) => {
                let formdata = new FormData();
                formdata.append('file',data);
                let url = `${this.$url}/uploadFile/uploadImageToQiniu`
                this.$post(url,formdata)
                .then(res=>{
                    console.log('btnStepOk res=>',res);
                    this.saveImg_loading = false;
                    this.cropperModal.show = false;
                    if(this.which == 'logo'){
                        this.logo.show = true;
                        this.logo.url = `${this.$qiniuFileUrl}/${res.key}`;
                        this.enterpriseForm.companyLogo = res.key;
                    }
                    if(this.which =='license'){
                        this.license.show = true;
                        this.license.url = `${this.$qiniuFileUrl}/${res.key}`;
                        this.enterpriseForm.companyLicense = res.key;
                    }
                    if(this.which == 'pics'){
                        this.enterpriseForm.pics.push({
                            src:res.key
                        })
                        this.imgs.push({
                            src:`${this.$qiniuFileUrl}/${res.key}`
                        })
                    }
                })
            }) 
        },
zhangwei900808 commented 6 years ago

好了,我去掉下面这段就好了 before:

<vueCropper
                    v-if="cropperModal.show"
                    ref="cropper"
                    v-bind="cropperModal.config"
                ></vueCropper>

after:

<vueCropper                    
                    ref="cropper"
                    v-bind="cropperModal.config"
                ></vueCropper>