做了一个功能，显示32位的流水号，目测显示在table上有一点点长，所以就做的过滤，只显示3位加省略号，鼠标移入的时候显示完全。

这个时候老大位就有一个问题了，复制的时候不方便，所以加了一个点击‘流水号’复制的功能

（一）结合vue用的（非脚手架）

<!--流水号-->
<td :id="item.pkid" class="clipboard用到的class名称"
    :data-clipboard-text="item.属性名"
    @click="copyValue()"
    @mouseenter="fullCusId(item.属性名,item.pkid)">
    {{ item.属性名 | 过滤条件}}
</td>

method:{
    copyValue: function () {
        hzToolObj.copyValue("cusId");
        var clipboard = new ClipboardJS("." + className);
        clipboard.on('success', function (e) {
            layer.alert("复制成功");
            // 如果是结合vue的@click用一定要加destroy销毁
            clipboard.destroy()
        });
        clipboard.on('error', function (e) {
            layer.alert("复制失败");
            clipboard.destroy()
        });
    },
}

（二）单独使用，不结合vue。git上有例子，可以下载下来看，可以复制Nodes,text,target,div,input等，大致一样。

<span data-clipboard-text="span1" class="spanC">CopySpan1</span>
<span data-clipboard-text="span2" class="spanC">CopySpan2</span>
<span data-clipboard-text="span3" class="spanC">CopySpan3</span>

    <script>
        var clipboard = new ClipboardJS(".spanC");
        clipboard.on('success', function(e) {
            console.log(e);
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
    </script>