使用方法
- 在el-table绑定指令
- 在需要的复制的column中传入**class-name="copy-prop"**即能实现复制效果
<el-table v-el-table-clipboard:copy v-el-table-clipboard:success="() => $message.success('复制成功')">
<el-table-column class-name="copy-prop" label="xxx" show-overflow-tooltip />
// 通过插槽形式
<el-table-column label="xxx">
<template slot-scope="scope">
<span class="copy-prop">{{ xxx }}</span>
</template>
</el-table-column>
</el-table>
v-el-table-clipboard
import Clipboard from 'clipboard'
export default {
bind(el, binding) {
switch (binding.arg) {
case 'success':
el._vClipBoard_success = binding.value;
break;
case 'error':
el._vClipBoard_error = binding.value;
break;
default: {
el.onClickListener = bindEvent(el, binding);
el.addEventListener('click', el.onClickListener, true);
}
}
},
update(el, binding) {
if (!el._vClipboard) return;
if (binding.arg === 'success') {
el._vClipBoard_success = binding.value;
} else if (binding.arg === 'error') {
el._vClipBoard_error = binding.value;
} else {
el._vClipBoard.text = function () { return binding.value; };
el._vClipBoard.action = () => binding.arg === 'cut' ? 'cut' : 'copy';
}
},
unbind(el, binding) {
if (!el._vClipboard) return
if (binding.arg === 'success') {
delete el._vClipBoard_success;
} else if (binding.arg === 'error') {
delete el._vClipBoard_error;
} else {
el._vClipBoard.destroy();
delete el._vClipBoard;
}
el.removeEventListener('click', el.onClickListener);
}
}
function bindEvent(el, binding) {
return function onClickListener(evt) {
const _target = evt.target || evt.srcElement;
const parent = _target.parentNode;
if (!_target) return;
if (parent.className.includes('copy-prop') || _target.className.includes('copy-prop') && parent.innerText.length) {
const clipboard = new Clipboard(_target, { text: () => _target.innerText, action: () => binding.arg === 'cut' ? 'cut' : 'copy' });
clipboard.on('success', e => {
const callback = el._vClipBoard_success;
callback && callback(e);
el._vClipBoard.destroy();
});
clipboard.on('error', e => {
const callback = el._vClipBoard_error;
callback && callback(e);
el._vClipBoard.destroy();
});
el._vClipBoard = clipboard;
}
}
}
==下面是业务修改内容,主要是针对鼠标不能选中文本不能去selection去手动选中某部分的文本而进行修改==
/**
* v-clipboard 文字复制剪贴
* Copyright (c) 2023 zw
*/
import Clipboard from 'clipboard'
import ClipboardAction from 'clipboard/src/clipboard-action'
import Vue from 'vue'
let restoreSelection = () => {}
// 继承重写类
class ExtendClipboard extends Clipboard {
constructor(trigger, options) {
super(trigger, options)
}
onClick(e) {
const trigger = e.delegateTarget || e.currentTarget
if (this.clipboardAction) {
this.clipboardAction = null
}
const selection = document.getSelection()
const selectedText = selection.toString()
if (selectedText) {
restoreSelection = () => {
selection.removeAllRanges()
const range = document.createRange()
range.selectNodeContents(trigger)
const textNode = trigger.firstChild
const startOffset = trigger.textContent.indexOf(selectedText)
const endOffset = startOffset + selectedText.length
range.setStart(textNode, startOffset)
range.setEnd(textNode, endOffset)
selection.addRange(range)
// TODO:放选中其他区域文本时,再点击此处会将其他区域的文本 startOffset endOffset 算到当前复制元素中
// 思考了下,应该通过鼠标移动距离去判断是否为当前cell,我这边不在意这个情况,当然也只是脑补一下,当然获取有更好办法。
}
}
this.clipboardAction = new ClipboardAction({
action: this.action(trigger),
target: this.target(trigger),
text: this.text(trigger),
container: this.container,
trigger,
emitter: this,
})
}
}
export default {
bind(el, binding) {
switch (binding.arg) {
case 'success':
el._vClipBoard_success = binding.value
break
case 'error':
el._vClipBoard_error = binding.value
break
default: {
el.onClickListener = handleListener(el, binding)
el.addEventListener('mouseup', el.onClickListener, true)
}
}
},
update(el, binding) {
if (!el._vClipboard) return
if (binding.arg === 'success') {
el._vClipBoard_success = binding.value
} else if (binding.arg === 'error') {
el._vClipBoard_error = binding.value
} else {
el._vClipBoard.text = function () {
return binding.value
}
el._vClipBoard.action = () => (binding.arg === 'cut' ? 'cut' : 'copy')
}
},
unbind(el, binding) {
if (!el._vClipboard) return
if (binding.arg === 'success') {
delete el._vClipBoard_success
} else if (binding.arg === 'error') {
delete el._vClipBoard_error
} else {
el._vClipBoard.destroy()
delete el._vClipBoard
}
el.removeEventListener('mouseup', el.onClickListener)
restoreSelection = () => {}
},
}
function handleListener(el, binding) {
return function onClickListener(evt) {
const _target = evt.target || evt.srcElement
const parent = _target.parentNode
if (!_target) return
if (parent.className.includes('copy-prop') || (_target.className.includes('copy-prop') && parent.innerText.length)) {
const clipboard = new ExtendClipboard(_target, { text: () => _target.innerText, action: () => (binding.arg === 'cut' ? 'cut' : 'copy') })
clipboard.on('success', e => {
const callback = el._vClipBoard_success
callback && callback(e)
el._vClipBoard.destroy()
Vue.nextTick(restoreSelection)
})
clipboard.on('error', e => {
const callback = el._vClipBoard_error
callback && callback(e)
el._vClipBoard.destroy()
Vue.nextTick(restoreSelection)
})
el._vClipBoard = clipboard
}
}
}