vue-cropper 组件上下移动卡顿问题

最新推荐文章于 2024-07-09 20:22:30 发布
最新推荐文章于 2024-07-09 20:22:30 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： vue技术栈 文章标签： vue npm vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40414540/article/details/119297629
版权
本文探讨了在vue-cropper组件中遇到的上下移动卡顿问题，分析了e.stopImmediatePropagation()在github讨论中失效的原因，主要涉及package.json和dist/index.js文件。解决方案包括理解webpack打包后的文件结构，修改并重新打包index.js，以及在代码中使用e.preventDefault()来替代。
摘要由CSDN通过智能技术生成

vue-cropper 组件上下移动卡顿问题

文章目录

前言

项目需求中是用 vant 跟 vue 结合使用进行使用，有个需求是用户上传自拍图片的需求，手机像素普遍比较大，拍的像素也很大，后台限制了图片大小，遇到上传图片过大问题，最后想了一下图片过大就引导用户进行图片裁剪，在查资料后决定使用 vue-cropper 组件进行使用，但是在使用过程中遇到了一个图片上下移动有卡顿，左右之后连续上下就很顺畅的问题，不知道是组件内部问题还是自己的使用冲突问题，百度查资料后在 vue-cropper 的 github 地址上有讨论过，有人提到了一个方式。后续有空再深究理解为啥会出现这个问题。
讨论地址: https://github.com/xyxiao001/vue-cropper/issues/316 ![讨论](https://img-blog.csdnimg.cn/21139698c8e746e19f43dbd6c1a0b850.png)

一、在 vue-cropper github讨论中为啥加了e.stopImmediatePropagation()会失效？

vue-cropper 引入基本都是通过 npm install 下载引入的，node_module 中 vue-cropper 的文件代码结构如下：

最低0.47元/天 解锁文章
大清晨哥哥
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue-upload-cropper:结合 ELUpload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装
05-10
vue-upload-cropper结合 element-ui upload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装DemoNotices使用条件：使用 elementUI编译环境安装并配置 babel-plugin-transform-vue-jsx，babel-plugin-syntax-...
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
vue-cropper 拖动图片和截图框
清心寡欲的博客
03-10 1894
我外层套了一个el-col, el-col的宽高一定要大于截图框的宽高，否则移动不了截图框和图片。can-move-box设置为true，表示可以拖动截图框。can-move设置为true，表示可以拖动图片。开发遇到vue--cropper不能拖动图片和截图框。
vue-cropper 组件滑动卡顿问题
rolinabc的博客
04-08 289
上篇说了公众号裁剪&上传图片，裁剪使用的插件是vue-cropper，在实际验证过程中发现裁剪框移动的时候存在卡顿问题。必须要先左右移动下，上下移动才能比较平滑。搜了一下，发现也有很多人遇到了类似的问题，然后有一篇帖子给的解决方式是阻止默认“事件”，还需要修改源码。先不说麻不麻烦，我试了，但是貌似没有解决我当下遇到的问题。首先，如果我没猜错，有这个问题的，一定是把该组件放在了vant的popup中使用了。具体原因应该是样式影响的，我没扒源码，感兴趣的可以看下，然后给分享下哦，记得踢踢我。
H5端 图片裁剪插件cropperjs和vue-cropper
超级小恐龙~
09-26 2263
使用vue-cropper（https://github.com/xyxiao001/vue-cropper）移动端情况下裁剪的时候 会出现部分机型图片翻转以及拖动卡顿问题，直接改源码， 图片翻转问题可以解决在checkOrientationImage方法中注释掉h.rotate(90*Math.PI/180)即可。卡拖动顿问题 在 moveImg 和startMove 方法中加上 t.stopImmediatePropagation() 本地调试二次打开的时候出现卡死现象，lssues中也未能...
Vue3.0使用vue-cropper遇到的问题
PhilipJ0303的博客
03-30 1941
报错原因并非因为上述 原因，归根结底是在Vue3中不能使用this后，我们使用了单独的一个变量通过getCurrentInstance()方法返回当前实例的对象，这会导致在开发环境执行的时候，使用。在使用vue-cropper工具过程当中遇到这样一个问题，开发环境启动运行之后，截图功能可以正常使用，但是重新打包部署至服务器以后，报错：cropper未定义。可以正常执行，但是到了部署的环境，是未定义。之后想着在前端界面打个断点看看，结果就发现以下情况。这块的cropper未定义，所以去定义并给他赋值。
vue动效：放大缩小与上下移动
weixin_45800869的博客
05-16 2011
笔记
vue安装vue-cropper报错4058
人工智障阿门的博客
08-23 240
不知道是命令提示符新建文件权限出错了还是怎样，导致它无法自己新建文件夹，所以才安装失败，所以自己手动新建一个，让它存进去就行。项目需要使用vue-cropper，安装的时候提示-4058，百度了一圈没找到答案，看报错提示是说没有文件夹。在里面新建了文件夹，命名为vue-cropper，因为他说找不到就手动给他建一个。然后重新 npm install vue-cropper，之后就不报错了。之前安装其他插件没问题的，这个报错会显得莫名其妙，但是死马当活马医，
vue报错篇
m0_65382120的博客
04-27 1万+
以下报错导致项目启动动不了 ERROR in ./node_modules/import-fresh/index.js 7:11-26 Module not found: Error: Can't resolve 'path' in 'D:\Users\17943\Desktop\电商后台管理\app\node_modules\import-fresh' BREAKING CHANGE: webpack < 5 used to include polyfills for node...
vue-cropper 使用demo。 基于 vue3，实现 旋转，缩放，控制裁剪，选择阈值，上传图片等功能。
03-18
使用 vue-cropper + vue3 + typescript + element-plus 1. 主要组件 vue-cropper 2. ui组件基于element-plus 3. 开发框架 基于vue 3.2
vue-avatar-cropper：一个简单而优雅的头像裁剪和上传插件
02-06
Vue头像作物 :girl: 一个简单而优雅...$ npm i vue-avatar-cropper 用法 < button id = " pick-avatar " >Select an image</ button > < avatar-cropper @ uploaded = " handleUploaded " tri
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
04-29
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
Vue 项目中 Cropper 图片裁剪的使用及遇到的问题
weixin_45015522的博客
02-26 1569
个人中心的头像上传需要对图片进行裁剪。
vue-cropper 截图组件踩坑记
热门推荐
hbjiankely的博客
12-26 1万+
安装 npm install --save vue-cropper 封装组件  &lt;template&gt; &lt;vueCropper height="562px" ref="cropper" :img="imgUrl" :outputSize="option.size" :outputType="option.outputType" :info=&
vue延迟加载、懒加载（比如加载vueCropper）
weixin_33955681的博客
01-15 1365
服务端渲染的时候，有些组件加载时候，浏览器会报错window is not defined 或者 document is not defined 比如我们在使用前端的裁剪插件 vue-cropper时，刷新时或者使用nuxt框架服务端渲染时会报这样的错！ 这时候我们考虑到使用懒加载，就是延迟加载： 1.引入组件 const vueCr...
使用vue-cropper实时预览发现的坑
写点什么好
01-30 1619
实时预览：https://blog.csdn.net/wexin_37276427/article/details/105354171 在项目中怎么都实现不了实时预览， 一直报了这个错误，怎么解决也没解决掉。 然后后面才意识到，原来我在做word导出的时候也遇见过。主要的原因是项目中使用mock.js，导致fs模块不能正常使用。 去main.js把mock注释掉就可以了回复正常了。 ...
vue项目页面在苹果手机浏览器上上下滑动出现卡顿现象解决办法
IT博客技术分享
12-12 1635
在公用的样式底部加上 -webkit-overflow-scrolling: touch;
安装nodejs | npm报错
最新发布
DX390609的博客
07-09 428
输入cmd打开命令提示符，输入node -v可以看到版本，说明nodejs安装成功。官网：https://nodejs.org/en/
vue裁剪组件vue-cropper_大大
09-02
关于Vue裁剪组件，我推荐你使用vue-cropper组件。它是一个功能强大且易于使用的图片裁剪工具，可以在Vue项目中方便地集成和使用。 Vue-cropper提供了一些常见的图片裁剪功能，包括缩放、旋转、翻转、裁剪框调整等。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值