效果图：

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

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

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

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

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

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

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

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

参考代码如下：

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

链接：http://www.71muke.com/blog/info/4411