利用clipboard实现一键复制图片+文件

场景:
需要通过一键复制图片+文件,减少复制工作量,之前是复制图片与文件分开,这样就变成两次的操作步骤。
原理:

步骤:
1、引入clipboard插件和jquery

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

2、定义想要复制的div标签与内容

<div id="wechat-copy-main">
<img class='' src='//www.baidu.com/img/bd_logo1.png' style='width:50px;'><br/>
    <br />
    【搜索关键词】桂圆枸杞红枣茶
    <br />
    领10元独家券,券后【24.8元】包邮秒杀!
    【推荐理由】【三盒540g大分量】独立包装,
    <br />
    方便携带!美容养颜,女生补气血必备茶!!
    <br />
    补气血,皮肤才会有光泽。喝起来很甜,
    <br />
    每天一杯,每天都有好气色!
</div>
<br />
<span class="wechat-copy">
   <button style="color:#FFFFFF;background-color: #263740">复制</button>
</span>

3、实例化clipboard插件

<script type="text/javascript">
    $(".wechat-copy").click(function (t) {
        var a = document.getElementById("wechat-copy-main");
        console.log(a);
        copyFunction(a, ".wechat-copy", "微信文案复制成功");
    });
    var copyFunction = function (t, a, i) {

            var e = new ClipboardJS(a, {
                target: function () {
                    return console.log(t, a),
                        t
                }
            });
            e.on("success", function (t) {
                    alert('文案复制成功!');
                    t.clearSelection()
            }),
                e.on("error", function (t) {
                    console.log('复制失败');
                        t.clearSelection()
                })
    };


</script>

总结:
1、img中的图片 不要加http:
2、mac版的浏览器好像复制不了图片,建议window用360浏览器

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值