关于vue实现复制粘贴上传图片

本插件用到elementUi中的el-upload
主要能实现点击上传,拖拽上传,截图复制粘贴(鼠标右键操作与Ctrl+C Ctrl+V)上传,网页图片复制粘贴上传,本地图片复制粘贴上传暂时无解
话不多说上代码






网上基本都是键盘操作的复制粘贴功能上传,此处添加鼠标右键粘贴功能

i标签主要是负责复制粘贴功能 默认的标签是不带编辑功能的 所以使用contenteditable来添加编辑功能,鼠标点击元素右键会出现粘贴复制属性。但是在粘贴时会导致元素可编辑并且粘贴来的内容会添加到元素中展示!!!所以要处理粘贴的默认功能,在handlePaste方法中

event.preventDefault();
event.returnValue=false;

这样就不会把内容粘贴到元素中,但是点击也是会出现光标闪动,直接键盘输入也是会输入内容,还是要继续优化,给i标签绑定键盘事件@keydown="handleFocus"移除焦点,注意此处不可绑定@focus事件去除光标,这样会导致我们复制的内容找不到可复制的光标目标而粘贴功能失效,左键粘贴不可点击~~
虽然禁止了粘贴内容到元素中,但是光标还是能看到,我的笨方法是给i一个样式caret-color: transparent;这个样式是使光标透明~~~

基本的复制粘贴上传大同小异 本文主要是介绍我遇到的一些小难点

来吧展示~~~


关于vue实现复制粘贴上传图片_第1张图片
image.png

你可能感兴趣的:(关于vue实现复制粘贴上传图片)