发布：2024/1/10 17:26:19作者：管理员 来源：本站 浏览次数：795
安装
从npm 安装css
npm install clipboard --save
或者，若是您不喜欢包管理，只需下载一个ZIP文件git
设置
script 引入github
<script src="dist/clipboard.min.js"></script>
三方 CDN引入
如今须要经过传递一个DOM选择器、一个HTML标签或者一组HTML标签来实例化它web
new ClipboardJS('.btn'); //经过类名.btn的元素实例化
在内部，咱们须要获取与选择器匹配的全部元素，并为每一个元素附加事件监听器。但你猜怎么着?若是有数百个匹配项，则此操做会消耗大量内存。
所以，咱们使用事件委托，它将多个事件侦听器替换为一个侦听器。chrome
使用方法
咱们正在经历一个声明性的复兴，这就是为何咱们决定利用HTML5的数据属性来得到更好的可用性npm
复制
至关广泛的使用场景是从其余元素复制文本。在触发元素上添加 data-clipboard-target 属性，该属性值用来匹配另外一个元素选择器。api
<!-- Target -->
<!-- <input
id="bar"
value="无敌大帅哥"
> -->
<p id="bar">无敌大帅哥</p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" > 复制 </button>
剪切
另外，也能够定义 data-clipboard-action 属性为 copy/cut 来，明确操做是 复制 / 剪切
若是忽略了这个属性，便默认 复制浏览器
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
正如上例，剪切 cut 的操做只能在 <input> 和 <textarea> 标签中起做用，在其余标签中会出现事件正常调用，可是操做是失败的，粘贴板是没有改变的。框架
经过属性复制文本
咱们甚至没必要须要其余承载文本的元素，仅经过 在触发元素中 添加 data-clipboard-text 属性 来完成复制ide
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
注意：
data-clipboard-text “级别最高”，在 data-clipboard-target 等属性存在时，复制内容及相关参数以 data-clipboard-text 为准
事件
回调函数： success / error
事件名 参数
success event.action copy/cut 操做
event.text copy/cut 操做文本内容
event.triger 触发操做的DOM元素
error event.action copy/cut 操做
event.triger 触发操做的DOM元素
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
工具提示
每一个应用程序有不一样的设计需求，这就是为何clipboard.js不包括任何CSS或内置的工具提示解决方案。
您在这个演示站点上看到的工具提示是使用GitHub的Primer构建的。若是你正在寻找类似的外观和感受，你可能想看看。
高级用法
若是你不想修改你的HTML，有一个很是方便的命令式API供你使用。您所须要作的就是声明一个函数，执行您的操做，而后返回一个值。
例如 若是想动态的设置一个目标元素target，则须要返回一个节点,即 动态设置点击复制的目标元素
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling || document.getElementById('name');
}
});
若是想动态设置内容文本text，则返回一个字符串String
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label') || 'default text ';
}
});
在Bootstrap Modals 中或与任何其余更改焦点的库一块儿使用时，将但愿将焦点元素设置为 container 值。
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});
而且，若是在单页应用中使用时，要更精确地管理DOM的生命周期，可使用如下方法清除建立的事件对象
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
浏览器支持
这个库同时依赖于Selection和execCommand api。全部浏览器都支持第一个，而如下浏览器支持第二个。
Chrome 42 +
Edge12 +
Firefox 41 +
IE 9 +
Opera 29 +
Safari 10 +
好消息是，若是须要支持旧的浏览器，clipboard.js能够优雅地降级。你所要作的就是显示一个工具提示“复制!”在调用成功事件时，由于文本已经被选中，因此在调用错误事件时，请按Ctrl+C进行复制。
你也能够经过运行ClipboardJS.isSupported()来检查是否支持clipboard.js，这样你就能够从UI中隐藏复制/剪切按钮。
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4