回到顶部

Contents

html clipboard.js 现代化的拷贝文字

使用方法

请看官网:http://www.clipboardjs.cn/

CDN 资源

资源地址:https://www.bootcdn.cn/clipboard.js/

举个例子

// 引入相关 js 和 css
<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 }}">{{ 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) {
        toastr.success('标题复制成功');
    });
    clipboard.on('error', function (e) {
        toastr.error('标题复制失败');
    });
</script>

为什么有 clipboard.js

拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的,它不应该依赖 flash 或者其他框架,应该保持简洁

这就是创造 clipboard.js 的原因和目的

注意版本兼容

新版本 2.0.4 new 一个对象时,名称变成了 ClipboardJS,而不再是 Clipboard。

旧版本 ( 1.7.1 ) 是: new Clipboard('.btn')

新版本 ( 2.0.4) 是: new ClipboardJS('.btn')


^_^
请喝咖啡 ×

前一篇: pycharm 2019.2 下 django 项目选择本地 python 虚拟环境
下一篇: Django url 反向解析(reverse) 和 命令空间(namespace)
captcha