前情提要

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

主要步驟

• 第一步：復制工具的選取。這里我選用的是原生的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项目中实现点击复制过滤条件，获取并处理粘贴板内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。