記一次點擊復制按鈕實現粘貼功能的實現 （vue.js）

在做公司產品的時候，需要實現一個功能，如圖

 當用戶點擊點擊復制按鈕時，需要將左邊的密鑰進行復制並且粘貼到用戶的剪貼板上，實現這個功能其實也不難，大致思路是首先我們需要兩個容器元素，一個容器是將后端傳遞過來的密鑰字符串進行處理，兩邊各顯示3個字符，將其余字符全部變成*號顯示，另一個容器是存放不經處理的密鑰字符串，但這個字符串不能展示到界面，所以需要絕對定位 + z-index放置到下面，當一個元素絕對定位后就脫離文檔流不占據空間，設置在z-index為負值放置最下面，用戶是不會感知的。

 

布局搭建好了之后，接下來需要實現復制功能，我這里是用Vue實現的，但也有原生JS的核心代碼

// 密鑰字符處理
cutLetters (character, left = 3, right = 3) {
    // 默認兩頭各顯示3個字符，中間的字符全部變成*號
    if (left + right === character.length) {
        return character;
    } else {
         const cutLeft = character.substr(0, left);
         const curRight = character.substr(-right);
        const words = character.substring(left, character.length - right);
        return cutLeft + words.replace(/\S*/, '***') + curRight;
    }
}

 

// 復制密鑰
copyWords (event) {
    const target = event.target.previousElementSibling; // 單擊'復制‘按鈕即執行該事件，獲取復制按鈕的上一個兄弟節點，我這里的html結構是按鈕左邊是真實的文本
    if (target) {
        // 獲取到了兄弟元素
        // 創建要copy的塊, createRange: 表示一個包含節點與文本節點的一部分的文檔片段。
        const block = document.createRange();
        // 選中要copy的區域
         block.selectNode(target);
        window.getSelection().removeAllRanges(); // 清空之前選中的所有內容
        window.getSelection().addRange(block); // 添加當前的的內容
        const copyResult = document.execCommand('copy');
        // 清除選中的區域
        window.getSelection().removeAllRanges();
        if (copyResult) {
            // 彈框提示
            this.$notify({
                content: this.$appt('indexing-service.copySuccess')
            });
        } else {
            this.$notify({
                content: this.$appt('indexing-service.copyFailed')
            });
        }
    }
}