vue点击复制功能
2024-09-02 02:54:02
复制功能，选中复制或者点击复制（不使用插件的情况下）
1、选中复制
这个比点击复制简单点
<template>
<div>
<el-button type="primary" plain @click="copy()">复制</el-button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
copy(){
document.execCommand("Copy"); // 执行浏览器复制命令
this.$message({
message: '复制成功',
type: 'success'
});
},
}
}
</script>
代码如图：
选中点击按钮即可复制，其实这个并不实用，有助于理解execCommand("Copy")。
2、点击复制
（我是在vue+element UI中实现点击表格中的按钮复制表格中的数据；）
<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleCopy(scope.$index, scope.row)">复制</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return{
tableData:{
name:'小明'
},
copyData:null,
}
},
methods:{
handleCopy(index,row){
this.copyData = row.name
this.copy(this.copyData)
},
copy(data){
let url = data;
let oInput = document.createElement('input');
oInput.value = url;
document.body.appendChild(oInput);
oInput.select(); // 选择对象;
console.log(oInput.value)
document.execCommand("Copy"); // 执行浏览器复制命令
this.$message({
message: '复制成功',
type: 'success'
});
oInput.remove()
},
}
}
</script>
如图：
其实就是把值赋给一个创建的节点选中
最新文章
- String 与 StringBuffer的区别
- Visual-Studio-2015-Cheat-Sheet Visual Studio 2015 快捷键列表
- FIO是测试IOPS
- C#通过反射获取上层调用方法信息
- The Dirichlet Distribution 狄利克雷分布 (PRML 2.2.1)
- 《Apache负载均衡》RHEL6
- redo、undo、binlog的区别
- VS2010中xercesc配置及简单示例
- SRM 582 Div II Level One： SemiPerfectSquare
- C#动态表达式计算(续1)
- 高性能日志类KLog（已开源代码）
- angular4.0 父子组建之间的相互通信
- 复杂的QR_code
- es6 ...克隆与函数深度克隆
- 深入浅出 Java 中的包装类
- [tool] google搜索的正确使用姿势(待补全)
- python学习之旅（二）
- jmeter 使用csv文件 注意项
- tcp/ip通信中ip头部结构iph->check校验计算
- MySQL crash-safe replication(2):