【js】vue项目中实现点击复制过滤条件，获取并处理粘贴板内容

前情提要

有这样一个需求：每次重复选过滤条件太麻烦啦，需要一个可以复制过滤条件的功能！过滤条件类似下图。

主要步骤

第一步：复制工具的选取。这里我选用的是原生的Document.execCommand()方法，该方法允许运行命令来操纵可编辑内容区域的元素。详情可查看MDN。
第二步：设计一个按钮，当click这个按钮的时候，执行handleCopy()方法。
- this.viewValue：存放过滤条件的值；
- 为什么要新建一个input元素：由于Document.execCommand()方法是用来操纵可编辑内容区域的元素，而这里的过滤条件明显不是，故我们要借用input元素；
- input.setSelectionRange(0, -1)：(0,-1) 代表全选
  
  以下引用于MDN：
  HTMLInputElement.setSelectionRange 方法可以从一个被 focused 的元素中选中特定范围的内容。
```
<button @click="handleCopy"></button>// js
handleCopy () {if (this.viewValue) {const input = document.createElement('input');let copyValue = JSON.stringify(this.viewValue);input.setAttribute('readonly', 'readonly');input.setAttribute('value', copyValue);document.body.appendChild(input);input.focus();input.setSelectionRange(0, -1);if (document.execCommand('copy')) {document.execCommand('copy');this.$Notify.success('复制成功！'); // 只是一个提示}document.body.removeChild(input);}
}
```
这样复制就可以实现复制啦，此时ctrl+v可以看到我们复制的this.viewValue的内容。

第三步：获取粘贴板的内容。
上述代码实现了过滤条件的复制，但是直接ctrl+v又没法替换过滤条件。所以，我们需要监听粘贴（paste）事件，在该事件中，将粘贴板中的内容替换到过滤条件中。

// mounted钩子中
document.addEventListener('paste', (event) => {// 用户打开了过滤条件窗口的话，执行。所以这里根据实际场景进行判断if (...) {// 获取粘贴板的内容let pasteValue = (event.clipboardData || window.clipboardData).getData('text');// 如果pasteValue符合过滤条件格式的话，执行。总不能用户复制了啥我们都执行吧，所以也根据实际场景做判断if (...) {// 节流，规定时间内，只执行一次。let nowTime = new Date();if (!this.lastPasteTime || nowTime - this.lastPasteTime > 5000) {// 复制的时候我们做了stringy处理，所以这里要转换回原有格式。pasteValue = JSON.parse(pasteValue);// 友好一点，提醒一下用户this.$Modal.confirm({title: '警告',content: '您正在进行的粘贴操作将覆盖现有条件，确认要继续吗？',onOk: () => {this.viewValue = pasteValue;},modalProps: {'confirm-text': '粘贴'}});this.lastPasteTime = nowTime;}// 如果当前聚焦了可编辑元素，那么我们复制的内容会被粘贴到该元素中，在不希望发生这样的情况的时候，我们需要阻止默认事件event.preventDefault();}}});

总结

到这里，点击按钮进行复制，以及获取并处理粘贴板内容的功能就实现了。今天的分享就到这里，如果有错误的地方或者处理不够好的地方欢迎提出来讨论讨论！

更新于2021年1月18日

无意中看到mdn上说到此特性被废弃，所以最好不用此特性来实现复制功能了。

【js】vue项目中实现点击复制过滤条件，获取并处理粘贴板内容相关推荐

node.js/VUE项目中导出excel表格的多种实现方法（D2admin适用）
方法一.vue+js-xlsx 1.vue项目内安装两个依赖:xlsx.file-saver npm install xlsx --save npm install file-saver --sa ...
解决vue项目中重复点击导航路由报错
vue版本 "vue": "^2.6.11", 主要代码 //重复点击导航路由报错 const originalPush = VueRouter.prototy ...
在vue项目中千分位展示输入金额，获取金额千分位，金额大写的方法
实现效果: 在用户输入完成input失焦的时候,input文本框中显示的是千分位格式的金额:在用户再次聚焦的input文本框时,文本框中展示的是正常的金额值,用户可以修改金额,失焦的时候再次千分位展示 ...
保姆级教程：js前端接入科大讯飞语音评测，实现朗读打分，vue对接科大讯飞语音评测，还可以实现句子逐词分析对错以及打分，将demo接入vue项目中
需求说明:实现一个点击录制英文句子朗读,然后调用科大讯飞接口分析朗读准确度,并逐词分析朗读正确性. 步骤一.下载运行demo 首先附上科大讯飞语音评测流式版的文档链接:链接在此然后在文档里找到dem ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
Vue项目判断鼠标点击事件的左键、中键（滚轮）或右键
Vue项目判断鼠标点击事件的左键.中键(滚轮)或右键去掉特定区域的右键点击事件在需要去掉右键点击事件的区域最外层div标签中添加@contextmenu.prevent属性 <templat ...
如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器
在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器 1.复制依赖文件 1.1 示例通过 webpack 插件自动复制依赖 1.1.1.编辑你的 webpack.config.js ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...

【js】vue项目中实现点击复制过滤条件，获取并处理粘贴板内容

前情提要

主要步骤

总结

更新于2021年1月18日

【js】vue项目中实现点击复制过滤条件，获取并处理粘贴板内容相关推荐

最新文章

热门文章