前情提要

有這樣一個(gè)需求：每次重復(fù)選過(guò)濾條件太麻煩啦，需要一個(gè)可以復(fù)制過(guò)濾條件的功能！過(guò)濾條件類似下圖。

主要步驟

• 第一步：復(fù)制工具的選取。這里我選用的是原生的Document.execCommand()方法，該方法允許運(yùn)行命令來(lái)操縱可編輯內(nèi)容區(qū)域的元素。詳情可查看MDN。

• 第二步：設(shè)計(jì)一個(gè)按鈕，當(dāng)click這個(gè)按鈕的時(shí)候，執(zhí)行handleCopy()方法。

  • this.viewValue：存放過(guò)濾條件的值；
  • 為什么要新建一個(gè)input元素：由于Document.execCommand()方法是用來(lái)操縱可編輯內(nèi)容區(qū)域的元素，而這里的過(guò)濾條件明顯不是，故我們要借用input元素；
  • input.setSelectionRange(0, -1)：(0,-1) 代表全選

    以下引用于MDN：
    HTMLInputElement.setSelectionRange 方法可以從一個(gè)被 focused 的 元素中選中特定范圍的內(nèi)容。

  <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('復(fù)制成功！'); // 只是一個(gè)提示}document.body.removeChild(input);} }

  這樣復(fù)制就可以實(shí)現(xiàn)復(fù)制啦，此時(shí)ctrl+v可以看到我們復(fù)制的this.viewValue的內(nèi)容。

• 第三步：獲取粘貼板的內(nèi)容。
  上述代碼實(shí)現(xiàn)了過(guò)濾條件的復(fù)制，但是直接ctrl+v又沒(méi)法替換過(guò)濾條件。所以，我們需要監(jiān)聽粘貼（paste）事件，在該事件中，將粘貼板中的內(nèi)容替換到過(guò)濾條件中。

  // mounted鉤子中 document.addEventListener('paste', (event) => {// 用戶打開了過(guò)濾條件窗口的話，執(zhí)行。所以這里根據(jù)實(shí)際場(chǎng)景進(jìn)行判斷if (...) {// 獲取粘貼板的內(nèi)容let pasteValue = (event.clipboardData || window.clipboardData).getData('text');// 如果pasteValue符合過(guò)濾條件格式的話，執(zhí)行。總不能用戶復(fù)制了啥我們都執(zhí)行吧，所以也根據(jù)實(shí)際場(chǎng)景做判斷if (...) {// 節(jié)流，規(guī)定時(shí)間內(nèi)，只執(zhí)行一次。let nowTime = new Date();if (!this.lastPasteTime || nowTime - this.lastPasteTime > 5000) {// 復(fù)制的時(shí)候我們做了stringy處理，所以這里要轉(zhuǎn)換回原有格式。pasteValue = JSON.parse(pasteValue);// 友好一點(diǎn)，提醒一下用戶this.$Modal.confirm({title: '警告',content: '您正在進(jìn)行的粘貼操作將覆蓋現(xiàn)有條件，確認(rèn)要繼續(xù)嗎？',onOk: () => {this.viewValue = pasteValue;},modalProps: {'confirm-text': '粘貼'}});this.lastPasteTime = nowTime;}// 如果當(dāng)前聚焦了可編輯元素，那么我們復(fù)制的內(nèi)容會(huì)被粘貼到該元素中，在不希望發(fā)生這樣的情況的時(shí)候，我們需要阻止默認(rèn)事件event.preventDefault();}}});

  總結(jié)

  到這里，點(diǎn)擊按鈕進(jìn)行復(fù)制，以及獲取并處理粘貼板內(nèi)容的功能就實(shí)現(xiàn)了。今天的分享就到這里，如果有錯(cuò)誤的地方或者處理不夠好的地方歡迎提出來(lái)討論討論！

更新于2021年1月18日

無(wú)意中看到mdn上說(shuō)到此特性被廢棄，所以最好不用此特性來(lái)實(shí)現(xiàn)復(fù)制功能了。

總結(jié)

以上是生活随笔為你收集整理的【js】vue项目中实现点击复制过滤条件，获取并处理粘贴板内容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。