做了一個功能，顯示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>