Vue+ElementUI+clipbords.js实现点击复制功能
一、目标
- 通过点击某个按钮,实现指定的目标内容复制到剪切板
二、引入需要的资源
- 安装ElementUI组件库 直通车
- ClipboardJs官网 直通车
- 安装ClipboardJs
npm install clipboard --save
- 安装完成后用
import Clipboard from 'clipboard'
导入Clipboard.js
三、给按钮和复制对象绑定id和class名称以及绑定事件
<p>订单编号:
<span id="link">2021013001154231</span>
<span class="fuzhi-btn"
@click="copyLink"
data-clipboard-action="copy"
data-clipboard-target="#link">
复制
</span>
</p>
data-clipboard-action: 默认值是copy复制,也可以写cut,但是cut只能用在输入框或者文本域
data-clipboard-target: 是指向你要复制的节点,这里传入节点id(#link)
四、对应事件
在methods中写入对应事件
copyLink(){
let clipboard = new Clipboard('.fuzhi-btn');
clipboard.on('success', ()=> {
this.$message({
type: "success",
message: "复制成功",
duration: 1500,
showClose: true,
});
clipboard.destroy();// 使用destroy清除缓存
});
clipboard.on('error', ()=> {
this.$message({
message: 'Copy error',
type: 'error',
duration: 1500
});
clipboard.destroy(); // 使用destroy清除缓存
})
}
越努力越幸运!