实现如下效果

核心的难点主要在如何获取区域的代码，只有获取到这个区域的代码就可以放到剪贴板中。

那么接下来我们来讲解这个功能的实现。

1、需要先给右上角添加一个“复制”按钮，这个是最基本的需要。

实现添加“复制”按钮的代码如下：

$(function(){// 需要等页面上的代码加载完成后，给右上角的标签区域加上一个按钮。$('.toolbar-item').each(function(i){varstr="&nbsp;&nbsp;<span style='color:#fff;cursor:pointer;' onclick='copy("+i+")'>复制</span>";$(this).append(str);});})

JavaScript 复制

需要注意的是，用$(function(){})包住的原因是，要页面上的代码生成后才能获取到页面标签，然后再添加一个复制按钮。

如果注意看，我们在给每个按钮添加了一个copy事件，里面需要传入对应的序号i，这个i用于获取页面上第几个pre代码块，这样才能指定区域的代码复制。

2、再实现copy()方法实现复制代码

实现复制的功能主要是获取文本框中的代码，要获取指定区域的文本后放到一个输入框中，再复制输入框的代码才能实现复制功能。

参考代码如下：

// 复制功能functioncopy(i){vartext=$("pre code").eq(i).text();varinput=document.createElement('textarea');input.value=$.htmlPrefilter(text);document.body.appendChild(input);input.select();// 选取文本域中的内容.document.execCommand("Copy");//再移除输入框document.body.removeChild(input);vm.$message.success("复制成功！");}

JavaScript 复制

至此就上面了两部分代码就可以实现这个功能了。

链接：https://my.mbd.baidu.com/r/ZsAfjOqNY4?f=cp&u=30cd3a3c4bcb26df