记一次点击复制按钮实现粘贴功能的实现 （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')
            });
        }
    }
}