layui 点击链接复制内容到剪切板

var tableObj = table.render({
            id: 'list_table',
            elem: '#list_table',
            url: '',
            align: "center",
            cols: [[ //表头
                {type: 'checkbox'},
                {type: 'numbers', title: '序号',width:80},
                {
                    field: 'lock', title: '链接', align: 'center', templet: function (d) {
                    return   '<a href="javascript:;" data-clipboard-text="" class="font-primary" lay-event="share">分享</a>';
                }, unresize: true, align: 'center'
                }
            ]]
        });

 table.on('tool(mainList)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        if (layEvent === 'share') {
                  $(".font-primary").attr("data-clipboard-text",data.id);
                  var clipboard = new ClipboardJS('.font-primary');
                  clipboard.on('success', function(e) {
                      alert('复制成功');
                      clipboard.destroy();  //解决多次弹窗
                      e.clearSelection();
                  });
         }
    }）

转载 ：https://blog.csdn.net/jia__xin/article/details/89173662

 

---------------------------------------------------------自己项目-----------------------------------------------------------------------------------------

 

 

<script src="/static/clipboard.min.js" charset="utf-8"></script>
<script src="/static/jquery-3.5.1.min.js" charset="utf-8"></script>

 

<script type="text/html" id="titleTpl">
     
      
      {{#  layui.each(d.ip, function(index, item){ }}
  
            <a class="layui-btn layui-btn-normal  font-primary layui-btn-xs data-count-edit"  data-clipboard-text=""  style="background-color: #009688;"  lay-event="share">{{ item.ip }}</a>
      <br>

      {{#  }); }}
     
 
</script>

    {field: 'ip', width: 160, title: '服务器IP',  templet: '#titleTpl', unresize: true},

 table.on('tool(currentTableFilter)', function (obj) {
        
            var id = obj.data.id;
            var data = obj.data;
         
            if (obj.event === 'edit') {

                var index = layer.open({
                    title: '编辑服务器',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: "{:url('admin/server/edit')}?id="+id,
                    end: function () {
                        window.location.reload();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }else if (obj.event === 'share') {
                //复制粘贴
              var text =  $(this).text();
              
                $(".font-primary").attr("data-clipboard-text",text);
                 var clipboard = new Clipboard('.font-primary');
                
                clipboard.on('success', function(e) {
                    layer.msg('复制成功');
                    // alert('复制成功');
                    clipboard.destroy();  //解决多次弹窗
                    e.clearSelection();
                });
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        type:'post',
                        url:"{:url('admin/server/del')}",
                        data:{id:obj.data.id},
                        success:function (res) {
                           // console.log(res);
                            if (res.status == 200) {
                                layer.msg(res.msg,{time: 500},function () {
                                    window.location.reload();
                                })
                            } else {
                                layer.msg('失败', {icon: 2, time: 500},function () {
                                    window.location.reload();
                                });
                            }
                        }
                    });
                });
            }
        });