编写一个指令(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;
    }
  }
}
相关推荐
工业互联网专业1 分钟前
基于大数据的学习资源推送系统的设计与实现 _django
vue.js·python·django·毕业设计·源码·课程设计·学习资源推送系统
Red Car29 分钟前
javascript 性能优化实例一则
开发语言·javascript·ecmascript
艾小码34 分钟前
从Hello World到变量数据类型:JavaScript新手避坑指南
前端·javascript
千叶寻-2 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
記億揺晃着的那天9 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
GISer_Jing10 小时前
ByteDance——jy真题
前端·javascript·面试
真的想不出名儿10 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
阳光阴郁大boy10 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
sorryhc10 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy10 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui