clipboard-复制文本功能

最新推荐文章于 2024-03-26 10:13:36 发布

二狗的程序人生

最新推荐文章于 2024-03-26 10:13:36 发布

阅读量1.1k

点赞数

分类专栏：前端jquery和vue

本文链接：https://blog.csdn.net/qq_20552525/article/details/81297092

版权

博客介绍了如何在显示较长流水号时，通过 Vue 实现点击流水号即可复制文本的功能。内容包括结合Vue的实现方法以及独立使用的示例代码。

摘要由CSDN通过智能技术生成

做了一个功能，显示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(&#