clipboard.js剪切板(含sweetalert弹窗)

人间小美味695

已于 2022-11-19 23:19:44 修改

阅读量525

点赞数 3

分类专栏： # JavaScript # 插件类 # other 文章标签： javascript html clipboard 剪切板

于 2021-04-22 09:41:49 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/115914625

版权

JavaScript 同时被 3 个专栏收录

33 篇文章 7 订阅

订阅专栏

插件类

15 篇文章 1 订阅

订阅专栏

other

11 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clipboard.js剪切板(含sweetalert弹窗)</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script>
    <style>
        .btn {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, 0%);
            display: inline-block;
            padding: 3px 10px;
            font-weight: bold;
            background-color: #0FB273;
            cursor: pointer;
            color: #fff;
            outline: none;
            border: none;
            text-shadow: none;
            -webkit-appearance: none;
            -webkit-user-select: text;
            box-shadow: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="btn" data-clipboard-text="恭喜你,文本内容复制成功 !!!">点我进行复制</div>
    <script>
        var clipboard = new Clipboard('.btn');
        clipboard.on('success', function(e) {
            console.log('Action:', e.action); //copy
            console.log('Text:', e.text); //恭喜你,文本内容复制成功 !!!
            console.log('Trigger:', e.trigger); //<div class="btn" data-clipboard-text="恭喜你,文本内容复制成功 !!!">点我进行复制</div>
            e.clearSelection();
            swal("复制成功！", e.text, "success");
        });

        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
            swal("复制失败！", "文本内容复制失败", "error");
        });
    </script>
    <script>
        console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');
    </script>
</body>

</html>