clipboard.js文本复制到剪贴板的现代方法
2023-09-14 08:58:23 时间
vue复制写法:
html:
<div class="" style="border: 1px solid #ececec; margin-bottom: 15px"> <pre id="code" style="margin: 0"> <script> var _txsc = _txsc || []; (function () { var tx = document.createElement("script"); tx.setAttribute('id', '_txsc'); tx.src = "https://a.xxx.com/txsc.js?si=[站点ID]"; var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(tx, z); })(); </script></pre > </div> <div> <a-button type="primary" style="margin-right: 10px" @click="handleCopy" class="J_clipboardBtn" data-clipboard-action="copy" data-clipboard-target="#code" >一键复制</a-button > <span style="color: #999; display: inline-block">预埋代码的额外参数请找程序猿确认</span> </div>
js:
import Clipboard from 'clipboard';
// 复制
const handleCopy = () => {
let clipboard = new Clipboard('.J_clipboardBtn');
clipboard.on('success', () => {
message.success('复制成功');
// 释放内存
clipboard.destroy();
});
clipboard.on('error', () => {
// 不支持复制
message.error('该浏览器不支持自动复制');
// 释放内存
clipboard.destroy();
});
};
效果图:
相关文章
- 用JS获取地址栏url参数的方法_js的url是啥
- 【说站】js中return如何结束生成器
- Js排序算法_js 排序算法
- matlab怎么把图片保存到指定路径_js选择本地文件的路径
- 手撕常见JS面试题
- Node.js 安全最佳实践
- Planetary.js 旋转地球插件
- js的数组定义(两种方法)详解编程语言
- JS every()方法:检测数组元素是否全部符合指定条件
- JS模拟多线程
- Javascript入门学习第四篇js对象和数组
- window.event.keyCode兼容IE和Firefox实现js代码
- JS去除右边逗号的简单方法
- 如何使用JS获取IE上传文件路径(IE7,8)
- js判断浏览器类型的方法
- JSP中js传递和解析URL参数以及中文转码和解码问题
- js将json字符串转换为json对象的方法解析
- js获取html页面节点方法(递归方式)
- js中call与apply的用法小结
- js加载读取内容及显示与隐藏div示例
- Js+Jq获取URL参数的集中方法示例代码
- 用js闭包的方法实现多点标注冒泡示例
- JS判断浏览器是否支持某一个CSS3属性的方法
- js实现二代身份证号码验证详解
- node.js中的fs.futimes方法使用说明
- JS实现OCX控件的事件响应示例