1首先需要用npm下载
npm install clipboard --save
单独封装clipboard.js文件
import Vue from 'vue';
import Clipboard from 'clipboard';
function clipboardSuccess() {
Vue.prototype.$message({
message: '复制成功',
type: 'success',
duration: 1500,
});
}
function clipboardError() {
Vue.prototype.$message({
message: '复制失败',
type: 'error',
});
}
export function handleClipboard(text, event, onSuccess, onError) {
event = event || {};
const clipboard = new Clipboard(event.target, {
text: () => text,
});
console.log('text',text)
clipboard.on('success', () => {
onSuccess ? onSuccess() : clipboardSuccess();
clipboard.off('error');
clipboard.off('success');
clipboard.destroy();
console.log('onSuccess',onSuccess)
console.log('clipboardSuccess',clipboardSuccess)
});
clipboard.on('error', () => {
onError ? onError() : clipboardError();
clipboard.off('error');
clipboard.off('success');
clipboard.destroy();
});
clipboard.onClick(event);
}
在vue组件中引入并使用
copyBtn(appntCord){
console.log('appntCord',appntCord)
console.log('appntCord',appntCord)
handleClipboard(appntCord, event, () => {
console.log('event',event)
alert('单号已经复制在剪贴版')
}, () => {
alert('单号复制失败!')
})
<span @click="copyBtn(showedNum)" id="copyBtn">复制</span>