【Vue】使用clipboard实现复制功能 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/new_website/scripts/layui/css/layui.css" rel="stylesheet" />
    <script src="../../new_website/scripts/jquery1.8.3/jquery-1.8.3.js"></script>
    <script src="/new_website/scripts/layui/layui.all.js"></script>
    <script src="/new_website/scripts/vue/vue.js"></script>
    <script src="../../new_website/scripts/common/clipboard.min.js"></script>
</head>
<body>
    <p>
        <span>{{logisticsNumber}}</span>
        <span class="layui-btn-normal btnCopy" :data-clipboard-text="logisticsNumber">复制单号</span>
    </p>


    <script type="text/javascript">
        //复制操作
        var clipboard = new ClipboardJS(".btnCopy");
        clipboard.on('success', function (e) {
            layer.msg('复制成功');
            e.clearSelection();
            //console.log(e);
        });
        clipboard.on('error', function (e) {
            layer.msg('复制失败');
            //console.log(e);
        });
    </script>
</body>
</html>

 

posted @ 2021-07-29 17:12  智者见智  阅读(268)  评论(0)    收藏  举报