目录1. element-ui的el-table实现双击复制单元格的内容到剪切板1. 在el-table中添加双击响应事件2. 在methods中添加双击绑定的copyText方法2
<el-table
:data="tableData"
@cell-dblclick="copyText"
border
>
.....
<el-table>
cell-dblclick函数有四个参数,分别是row, column, cell, event;
row:可看到被其操作单元格所在行的所有的数据;
cloumn:可以看到被其操作单元格的property,根据property可以再row中得到该单元格的值;
cell:可看到该单元格的dom结构;
event:事件触发时的所有参数;
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'})//提示
}
<span v-else>
<i class="el-icon-document-copy" @click="clickCopy(msg)" />
{{ msg }}
</span>
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' })
}
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' })
}
https://developer.mozilla.org/zh-CN/docs/WEB/api/EventTarget/addEventListener
到此这篇关于Vue中如何实现复制内容到剪切板的文章就介绍到这了,更多相关vue复制内容到剪切板内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue中如何实现复制内容到剪切板详解
本文链接: https://lsjlt.com/news/169322.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0