html clipboard.js 现代化的拷贝复制粘贴剪切文字

// 引入相关 js 和 css，要先引入 jquery
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

// data-clipboard-text 复制的内容
<h2 class="am-article-title blog-text-center" style="margin-top: 20px;"
    data-clipboard-text="{{ article.title }}" data-success-msg="自定义复制成功文案">{{ article.title }}</h2>

<script>
    // 配置 toastr.js，弹出框在底部中间
    toastr.options = {"positionClass": "toast-bottom-center"};
    // 复制成功与失败提醒
    var clipboard = new ClipboardJS('.am-article-title'); // .class 名称
    clipboard.on('success', function (e) {
        let successMsg = e.trigger.getAttribute('data-success-msg') || '复制成功';
        toastr.success(successMsg);
    });
    clipboard.on('error', function (e) {
        toastr.error('复制失败');
    });
</script>