在我们项目开发中常常会有这样的需求 - 实现复制功能，用传统的方式不仅代码繁琐还不方便，为此利用vue指令的方式来实现，用起来简单方便
安装
npm install clipboard --save
或
cnpm i clipboard -S
功能实现
// 引用
import Clipboard from 'clipboard';
- 说明
-
data-clipboard-text- 要复制内容的属性 -
data-clipboard-action- cut - 内容被剪贴（只能在input和textarea中起作用）
- copy - 内容被复制(默认值)
-
data-clipboard-target- 指向复印节点，这里指input的目标id (也可以是元素节点) - 创建函数时可指定内容或要复制的节点目标
var clipboard = new Clipboard('.btn', { // 通过target指定要复印的节点 target: function() { return document.querySelector('div'); }, // 点击copy按钮，直接通过text直接返回复印的内容 text: function() { return 'to be or not to be'; } });
-
- 非指令方式 - 静态
<button class="tag-read" data-clipboard-text="我是可以复制的内容，啦啦啦啦" @click="copy">立即阅读</button>
copy() {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
}
- 非指令方式 - 动态
<input type="text" v-model="copyContent" id="copy_text" style="opacity: 0">
<button ref="copy" data-clipboard-action="copy"
data-clipboard-target="#copy_text" @click="copy">复制</button>
let clipboard = new Clipboard(this.$refs.copy);
clipboard.on('success', function () {
Toast('复制成功')
})
clipboard.on('error', function () {
Toast('复制失败，请手动复制')
})
- 指令方式 - 动态
import Clipboard from 'clipboard';
Vue.directive('clipboard', {
bind(el, bingind, vnode) {
const clip = new Clipboard(el);
el.dataset.clipboardText = bingind.value;
clip.on('success', e => {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
clip.on('error', e => {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
},
update(el, bingind) {
el.dataset.clipboardText = bingind.value;
console.log('bingind');
console.log(bingind);
}
});
// 页面使用
<div v-clipboard="要复制的值或变量">大家好</div>
- 指令方式 - 动态 - 扩展篇
-
bingind.arg- 核心部分 - 可接收不同的参数
import Clipboard from 'clipboard';
Vue.directive('clipboard', {
bind(el, bingind, vnode) {
switch (bingind.arg) {
case 'success':
el._vClipBoard_success = bingind.value;
break;
case 'error':
el._vClipBoard_error = bingind.value;
break;
default: {
const clip = new Clipboard(el, {
text: () => bingind.value,
action: () => bingind.arg === 'cut' ? 'cut' : 'copy'
});
// el.dataset.clipboardText = bingind.value;
clip.on('success', e => {
/* {action,text,trigger} = e */
const callback = el._vClipBoard_success;
callback && callback(e);
});
clip.on('error', e => {
const callback = el._vClipBoard_error;
callback && callback(e);
});
el._vClipBoard = clip;
}
}
},
update(el, bingind) {
// el.dataset.clipboardText = bingind.value;
if (bingind.arg === 'success') {
el._vClipBoard_success = bingind.value;
} else if (bingind.arg === 'error') {
el._vClipBoard_error = bingind.value;
} else {
el._vClipBoard.text = function () {
return bingind.value;
};
el._vClipBoard.action = () => bingind.arg === 'cut' ? 'cut' : 'copy';
}
},
unbind(el, bingind) {
if (bingind.arg === 'success') {
delete el._vClipBoard_success;
} else if (bingind.arg === 'error') {
delete el._vClipBoard_error;
} else {
el._vClipBoard.destroy();
delete el._vClipBoard;
}
}
});
页面使用
-
v-clipboard:copy- copy 要复制的内容 cut 要剪贴的内容 -
v-clipboard:success复制或剪贴成功的回调函数 -
v-clipboard:error复制或剪贴失败的回调函数
<div
v-clipboard:copy="selectValue"
v-clipboard:success="clipboardSuccess"
v-clipboard:error="clipboardError"
>clipboard</div>
