clipboard.js使用教程
前言
我们开发的中,有的应用需要用户拷贝页面的内容,方便用户操作。此时,就是需要是用粘贴板功能。
clipboard.js的作用就正好满足了我们的需求
一、基本使用步骤
1.npm安装
npm install clipboard --save
2. 在js文件中引入
import Clipboard from "clipboard";
3.页面结构
<div class="btn" id="copyText" :data-clipboard-text="currentPageUrl" data-clipboard-action="copy" data-clipboard-target="#target" @click="copyText">复制</div>
4.方法调用
copyText() {
let _this = this;
let clipboard = new Clipboard("#copyText");
clipboard.on("success", function(e) {
alert("复制成功");
e.clearSelection();
});
},
二、项目使用案例
1.文件封装
clipboard.js
import Clipboard from 'clipboard'
import { message } from 'ant-design-vue'
function clipboardSuccess(text) {
message.success(`复制${text}成功`)
}
function clipboardError(text) {
message.error(`复制${text}失败`)
}
/**
* @description 复制数据
* @param text
* @param event
*/
export default function handleClipboard(text, event) {
const clipboard = new Clipboard(event.target, {
text: () => text,
})
clipboard.on('success', () => {
clipboardSuccess(text)
clipboard.destroy()
})
clipboard.on('error', () => {
clipboardError(text)
clipboard.destroy()
})
clipboard.onClick(event)
}
2.页面使用
(1)引入封装文件
import clip from '@/utils/clipboard'
(2)页面
<a-col
v-for="(item, index) in queryIcon"
:key="index"
:lg="2"
:md="3"
:sm="8"
:xl="2"
:xs="6"
>
<a-card shadow="hover" @click="handleCopyIcon(item, $event)">
<vab-icon :icon="item"></vab-icon>
</a-card>
<div class="icon-text" @click="handleCopyText(item, $event)">
{{ item }}
</div>
</a-col>
(3)方法调用
handleCopyText(item, event) {
clip(item, event)
},
handleCopyIcon(item, event) {
clip(`<vab-remix-icon icon-class="${item}"></vab-remix-icon>`, event)
},
总结
基础+小实战