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

目录

        • 一、代码
        • 二、效果演示

一、代码


<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); //
点我进行复制
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>

二、效果演示

clipboard.js剪切板(含sweetalert弹窗)_第1张图片


clipboard.js剪切板(含sweetalert弹窗)_第2张图片


标签:JavaScript,HTML,clipboard.js,剪切板


更多演示案例,查看 案例演示


欢迎评论留言!

你可能感兴趣的:(JavaScript,插件类,other,javascript,html,clipboard,剪切板)