html clipboard.js 现代化的拷贝复制文字
2023-03-07 09:46:42 时间
使用方法
CDN 资源
资源地址:https://www.bootcdn.cn/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 }}">{{ 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')
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的