vue中如何实现复制内容到剪切板详解

Dora ·

更新时间:2024-09-20

· 1989 次阅读

1. element-ui的el-table实现双击复制单元格的内容到剪切板

1. 在el-table中添加双击响应事件

2. 在methods中添加双击绑定的copyText方法

2. 单击copy图标复制对应的内容到剪切板

1. 添加copy的小图标

2. 在methods中添加单击复制的clickCopy方法

3.踩坑

4.eventlistener参考:

总结

1. element-ui的el-table实现双击复制单元格的内容到剪切板 1. 在el-table中添加双击响应事件

<el-table
      :data="tableData"
      @cell-dblclick="copyText"
      border
    >
    .....
<el-table>

cell-dblclick函数有四个参数，分别是row, column, cell, event；

row：可看到被其操作单元格所在行的所有的数据；

cloumn：可以看到被其操作单元格的property，根据property可以再row中得到该单元格的值；

cell：可看到该单元格的dom结构；

event：事件触发时的所有参数；

2. 在methods中添加双击绑定的copyText方法

copyText(row, column, cell, event){
  // 双击复制
  let save = function (e){
    e.clipboardData.setData('text/plain',event.target.innerText); 
    e.preventDefault();  //阻止默认行为
  }
  document.addEventListener('copy',save);//添加一个copy事件
  document.execCommand("copy");//执行copy方法
  this.$message({message: '复制成功', type:'success'})//提示
}

2. 单击copy图标复制对应的内容到剪切板 1. 添加copy的小图标

<span v-else>
  <i class="el-icon-document-copy" @click="clickCopy(msg)" />
  {{ msg }}
</span>

2. 在methods中添加单击复制的clickCopy方法

clickCopy(msg) {
  const save = function(e) {
    e.clipboardData.setData('text/plain', msg)
    e.preventDefault() // 阻止默认行为
  }
  document.addEventListener('copy', save) // 添加一个copy事件
  document.execCommand('copy') // 执行copy方法
  this.$message({ message: '复制成功', type: 'success' })
}

3.踩坑

1. 添加了copy事件之后整个页面按ctrl+c复制东西没反应了

猜测是使用document.addEventListener(‘copy’, save)会在整个dom树添加事件,会覆盖dom树原有的事件的发生,所以需要添加once参数使这个事件只生效一次

once 表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除

clickCopy(msg) {
      const save = function(e) {
        e.clipboardData.setData('text/plain', msg)
        e.preventDefault() // 阻止默认行为
      }
      const once = {
        once: true
      }
      document.addEventListener('copy', save, once) // 添加一个copy事件,当触发时执行一次,执行完删除
      document.execCommand('copy') // 执行copy方法
      this.$message({ message: '复制成功', type: 'success' })
    }

4.eventlistener参考:

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

总结

到此这篇关于vue中如何实现复制内容到剪切板的文章就介绍到这了,更多相关vue复制内容到剪切板内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE

1024 个赞