【js】vue项目中实现点击复制过滤条件,获取并处理粘贴板内容
前情提要有这样一个需求:每次重复选过滤条件太麻烦啦,需要一个可以复制过滤条件的功能!过滤条件类似下图。主要步骤第一步:复制工具的选取。这里我选用的是原生的Document.execCommand()方法,该方法允许运行命令来操纵可编辑内容区域的元素。详情可查看MDN。第二步:设计一个按钮,当click这个按钮的时候,执行handleCopy()方法。this.viewVa...
·
前情提要
有这样一个需求:每次重复选过滤条件太麻烦啦,需要一个可以复制过滤条件的功能!过滤条件类似下图。
主要步骤
-
第一步:复制工具的选取。这里我选用的是原生的
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上说到此特性被废弃,所以最好不用此特性来实现复制功能了。
更多推荐
已为社区贡献5条内容
所有评论(0)