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

 更新时间:2022年10月13日 12:02:18   作者:爱学习的狮王  
有些业务需求需要点击按钮复制链接,下面这篇文章主要给大家介绍了关于vue中如何实现复制内容到剪切板的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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复制内容到剪切板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vite配置路径别名的简单实现方法

    Vite配置路径别名的简单实现方法

    Vite项目中我们可以手动将src路径设置**@**路径别名,可以省下很多引入路径的冗余路径,下面这篇文章主要给大家介绍了关于Vite配置路径别名的简单实现方法,需要的朋友可以参考下
    2023-04-04
  • vue隐藏路由的实现方法

    vue隐藏路由的实现方法

    这篇文章主要介绍了vue隐藏路由的实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 前端vue中实现文件下载的几种方法总结

    前端vue中实现文件下载的几种方法总结

    这篇文章主要介绍了前端vue中实现文件下载的几种方法总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue-cli项目中使用echarts图表实例

    vue-cli项目中使用echarts图表实例

    在本篇文章里我们给大家分享了关于vue中使用echarts图表的实现方法,有兴趣的朋友们学习下。
    2018-10-10
  • vue+elementUI 复杂表单的验证、数据提交方案问题

    vue+elementUI 复杂表单的验证、数据提交方案问题

    这篇文章主要介绍了vue+elementUI 复杂表单的验证、数据提交方案,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue实现联动选择

    vue实现联动选择

    这篇文章主要为大家详细介绍了vue实现联动选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue3中toRef与toRefs的区别

    Vue3中toRef与toRefs的区别

    这篇文章主要介绍了Vue3中toRef与toRefs的区别,toRefs与toRef功能一致,但可以批量创建多个ref对象,需要注意的是它只会解析对象的第一层属性,语法直接传入对象 toRefs,下面更多内容的介绍需要的小伙伴可以参考一下
    2022-03-03
  • vue ui的安装步骤以及使用详解

    vue ui的安装步骤以及使用详解

    最近公司开发一个项目,采用的前后端分离的方式,前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,下面这篇文章主要给大家介绍了关于vue ui的安装步骤以及使用的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue2+element-ui新增编辑表格+删除行功能

    vue2+element-ui新增编辑表格+删除行功能

    这篇文章主要介绍了vue2+element-ui新增编辑表格+删除行功能,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • babel7.x和webpack4.x配置vue项目的方法步骤

    babel7.x和webpack4.x配置vue项目的方法步骤

    这篇文章主要介绍了babel7.x和webpack4.x配置vue项目的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05

最新评论