场景描述

element plus 表格内容超出添加show-tooltip-when-overflow属性，一定宽度内超出显示...，鼠标hover上去，会显示全部，那么这个时候需求来了，我不仅要看全部内容，有时候我还需要复制出来，于是写了个v-copy，上号

const copys = (el, binding) => {
  //ondblclick
  el.ondblclick = () => {
    if (navigator.clipboard) {
      //创建一个range对象
      const range = document.createRange()
      //使 Range 包含某个节点及其内容。
      range.selectNode(el)
      //   用户选择的文本范围
      const selection = window.getSelection()
      if (selection.rangeCount > 0) selection.removeAllRanges()
      //选中
      selection.addRange(range)
      //复制
      navigator.clipboard.writeText(binding.value)
      ElMessage({
        message: '已复制到粘贴板！',
        type: 'success',
      })
    } else {
      // 创建输入框
      var textarea = document.createElement('textarea')
      document.body.appendChild(textarea)
      // 隐藏此输入框
      textarea.style.position = 'absolute'
      textarea.style.top = '-9999'
      // 赋值
      textarea.value = binding.value
      // 选中
      textarea.select()
      // 复制
      document.execCommand('copy', true)
      ElMessage({
        message: '已复制到粘贴板！',
        type: 'success',
      })
    }
  }
}
export default copys

如何使用

在mian.js里引入，注册指令就可以了

import copys from './directives/copy.js'

app.directive('copy', copys)

最后

关于range，大家可以自行前往MDN上查看了解