1.安装插件clipboard
2.指令形式开发,文件代码分别是 clipboard.js , index.js
const Clipboard = require('clipboard')
if (!Clipboard) {
throw new Error('you should npm install `clipboard` --save at first ')
}
export default {
bind(el, binding) {
if (binding.arg === 'success') {
el._v_clipboard_success = binding.value
} else if (binding.arg === 'error') {
el._v_clipboard_error = binding.value
} else {
const clipboard = new Clipboard(el, {
text() { return binding.value },
action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
})
clipboard.on('success', e => {
const callback = el._v_clipboard_success
callback && callback(e) // eslint-disable-line
})
clipboard.on('error', e => {
const callback = el._v_clipboard_error
callback && callback(e) // eslint-disable-line
})
el._v_clipboard = clipboard
}
},
update(el, binding) {
if (binding.arg === 'success') {
el._v_clipboard_success = binding.value
} else if (binding.arg === 'error') {
el._v_clipboard_error = binding.value
} else {
el._v_clipboard.text = function() { return binding.value }
el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
}
},
unbind(el, binding) {
if (binding.arg === 'success') {
delete el._v_clipboard_success
} else if (binding.arg === 'error') {
delete el._v_clipboard_error
} else {
el._v_clipboard.destroy()
delete el._v_clipboard
}
}
}
import Clipboard from './clipboard'
const install = function(Vue) {
Vue.directive('Clipboard', Clipboard)
}
if (window.Vue) {
window.clipboard = Clipboard
Vue.use(install); // eslint-disable-line
}
Clipboard.install = install
export default Clipboard
3.需要复制剪贴板页面操作
<el-button
type="primary"
id="btn_copy"
style="margin-bottom:20px"
data-clipboard-action="copy"
data-clipboard-target=".data-content"
@click="copyTableData"
>复制到粘贴板</el-button
>
copyTableData() {
const flagThis = this
let clipboard = new ClipboardJS("#btn_copy");
clipboard.on("success", function(e) {
e.clearSelection(); //清除选择涂黑显示
flagThis.$vMessage({
message: "复制成功,可粘贴表格数据",
type: "success"
});
});
clipboard.on("error", function(e) {
flagThis.$vMessage({
message: "复制失败,请刷新后重试!",
type: "error"
});
});
},