编写一个指令(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;
    }
  }
}
相关推荐
小粉粉hhh10 小时前
Node.js(五)——编写接口
前端·javascript·node.js
大意的百合11 小时前
Electron 应用如何上架微软商店:从 MSIX 打包到商店提交
javascript·microsoft·electron
自然 醒11 小时前
前端如何实现在线预览office常见文件功能?
前端·vue.js
肉肉不吃 肉11 小时前
前端调试跨域如何解决
前端·vue.js
weedsfly11 小时前
单例模式在前端中的正确打开方式
前端·javascript·面试
卓怡学长12 小时前
w268基于springboot + vue 物流系统
java·数据库·vue.js·spring boot·spring·intellij-idea
多加点辣也没关系1 天前
JavaScript|第4章:类型转换
开发语言·javascript
yqcoder1 天前
httpOnly 是什么,又有什么用?
开发语言·前端·javascript
烬羽1 天前
还在手动拼路径、写回调地狱?一文吃透 Node.js 的 path 和 fs
javascript·程序员·node.js
mONESY1 天前
LangChain JS 高性能并行执行解析、工具调用底层封装
javascript