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

使用方法

  • el-table绑定指令
  • 在需要的复制的column中传入**class-name="copy-prop"**即能实现复制效果
javascript 复制代码
<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

javascript 复制代码
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;
    }
  }
}
相关推荐
gnip6 小时前
链式调用和延迟执行
前端·javascript
杨天天.6 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu7 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
YU大宗师7 小时前
React面试题
前端·javascript·react.js
给月亮点灯|8 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
三思而后行,慎承诺9 小时前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
lxh01139 小时前
LRU 缓存
开发语言·前端·javascript
wow_DG9 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架
Hexene...10 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架