编写一个指令(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;
    }
  }
}
相关推荐
mCell8 小时前
Lua 编程入门:从基础语法到元表
javascript·算法·lua
伟大的兔神9 小时前
我做了一个本地优先的 AI 图片工作台:Loomora v1.0.0 正式发布
前端·javascript·vue.js
fangzhanpeng16811 小时前
(前端)2.js变量作用域样例
开发语言·前端·javascript
Flynt11 小时前
我扒了Fantastic-admin 6.0的源码,聊聊"AI时代版本答案"这个称号
vue.js·ai编程·cursor
码艺-Alimjan13 小时前
Vue项目源码备份最佳实践:无视node_modules,打包体积仅2MB
前端·javascript·vue.js
风月说与山鬼15 小时前
十二、Vue插件
前端·vue.js
xixiaoyunya15 小时前
JavaScript 异步编程全解析:从回调地狱到 async/await 的演进之路
开发语言·javascript·ecmascript
张元清15 小时前
React useScrollLock Hook:为弹窗锁住页面滚动 (2026)
javascript·react.js
Sayai15 小时前
【无标题】ECharts 实现日志量异常检测:基线 ±Kσ 基带 + 灵敏度切换(Vue2 实战)
前端·javascript·echarts
默_笙16 小时前
💌 为了把"主题色"传给孙子组件,我翻了五层楼——直到遇见了 useContext
前端·javascript