编写一个指令（v-el-table-clipboard）使el-table-column在show-overflow-tooltip 情况下点击复制

使用方法

• 在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>
1
2
3
4
5
6
7
8
9

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;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

下面是业务修改内容，主要是针对鼠标不能选中文本不能去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
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124